effect-cube.scss 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. .swiper-cube {
  2. overflow: visible;
  3. .swiper-slide {
  4. pointer-events: none;
  5. backface-visibility: hidden;
  6. z-index: 1;
  7. visibility: hidden;
  8. transform-origin: 0 0;
  9. width: 100%;
  10. height: 100%;
  11. .swiper-slide {
  12. pointer-events: none;
  13. }
  14. }
  15. &.swiper-rtl .swiper-slide {
  16. transform-origin: 100% 0;
  17. }
  18. .swiper-slide-active {
  19. &,
  20. & .swiper-slide-active {
  21. pointer-events: auto;
  22. }
  23. }
  24. .swiper-slide-active,
  25. .swiper-slide-next,
  26. .swiper-slide-prev,
  27. .swiper-slide-next + .swiper-slide {
  28. pointer-events: auto;
  29. visibility: visible;
  30. }
  31. .swiper-slide-shadow-top,
  32. .swiper-slide-shadow-bottom,
  33. .swiper-slide-shadow-left,
  34. .swiper-slide-shadow-right {
  35. z-index: 0;
  36. backface-visibility: hidden;
  37. }
  38. .swiper-cube-shadow {
  39. position: absolute;
  40. left: 0;
  41. bottom: 0px;
  42. width: 100%;
  43. height: 100%;
  44. opacity: 0.6;
  45. z-index: 0;
  46. &:before {
  47. content: '';
  48. background: #000;
  49. position: absolute;
  50. left: 0;
  51. top: 0;
  52. bottom: 0;
  53. right: 0;
  54. -webkit-filter: blur(50px);
  55. filter: blur(50px);
  56. }
  57. }
  58. }