cpxx.css 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .carousel-container {
  2. position: relative;
  3. width: 320px;
  4. height: 420px;
  5. perspective: 1200px;
  6. }
  7. .carousel-stack {
  8. position: absolute;
  9. width: 100%;
  10. height: 100%;
  11. transform-style: preserve-3d;
  12. }
  13. .carousel-item {
  14. position: absolute;
  15. width: 100%;
  16. height: 100%;
  17. border-radius: 12px;
  18. overflow: hidden;
  19. box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  20. cursor: pointer;
  21. transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  22. }
  23. .carousel-item img {
  24. width: 100%;
  25. height: 100%;
  26. object-fit: cover;
  27. user-select: none;
  28. }
  29. .carousel-item.active {
  30. transform: translateZ(0) scale(1);
  31. opacity: 1;
  32. z-index: 10;
  33. }
  34. .carousel-item.next {
  35. transform: translate3d(40px, 20px, -150px) scale(0.9);
  36. opacity: 0.9;
  37. z-index: 9;
  38. }
  39. .carousel-item.prev {
  40. transform: translate3d(-40px, 20px, -150px) scale(0.9);
  41. opacity: 0.9;
  42. z-index: 8;
  43. }
  44. .carousel-item.hidden {
  45. transform: translateZ(-300px) scale(0.8);
  46. opacity: 0;
  47. z-index: 1;
  48. }
  49. .carousel-btn {
  50. position: absolute;
  51. top: 50%;
  52. transform: translateY(-50%);
  53. width: 44px;
  54. height: 44px;
  55. border-radius: 50%;
  56. background: rgba(255, 255, 255, 0.2);
  57. border: none;
  58. color: #fff;
  59. font-size: 18px;
  60. cursor: pointer;
  61. z-index: 20;
  62. backdrop-filter: blur(5px);
  63. transition: 0.3s;
  64. }
  65. .carousel-btn:hover {
  66. background: rgba(255, 255, 255, 0.4);
  67. }
  68. .btn-prev {
  69. left: -60px;
  70. }
  71. .btn-next {
  72. right: -60px;
  73. }