CSS   30
index css
Guest on 6th February 2023 01:37:13 PM


  1.  
  2. header .banner {
  3.   width: 1200px;
  4.   height: 300px;
  5.   margin: 50px auto 0;
  6. }
  7. header .banner .slide-carousel {
  8.   margin-bottom: 20px;
  9. }
  10. header .banner .slide-3d .desc {
  11.   display: none;
  12. }
  13. header .banner .slide-3d .item-list li {
  14.   width: 750px;
  15.   height: 300px;
  16.   transition: all 0.5s ease-out;
  17.   opacity: 0;
  18.   position: absolute;
  19.   top: 0;
  20.   left: 0;
  21. }
  22. header .banner .slide-3d .item-list li.item0 {
  23.   transform: translate3d(-225px, 0, 0) scale(0.8);
  24. }
  25. header .banner .slide-3d .item-list li.item1 {
  26.   transform: translate3d(0, 0, 0) scale(0.8);
  27.   transform-origin: 0 50%;
  28.   opacity: 1;
  29.   z-index: 2;
  30. }
  31. header .banner .slide-3d .item-list li.item2 {
  32.   transform: translate3d(225px, 0, 0) scale(1);
  33.   transform-origin: 0 50%;
  34.   opacity: 1;
  35.   z-index: 3;
  36. }
  37. header .banner .slide-3d .item-list li.item3 {
  38.   transform: translate3d(450px, 0, 0) scale(0.8);
  39.   transform-origin: 100% 50%;
  40.   opacity: 1;
  41.   z-index: 2;
  42. }
  43. header .banner .slide-3d .item-list li.item4 {
  44.   transform: translate3d(675px, 0, 0) scale(0.8);
  45. }
  46. header .banner .slide-3d .item-list li.item5 {
  47.   transform: translate3d(900px, 0, 0) scale(0.8);
  48. }
  49. header .banner .slide-3d .item-list li.item6 {
  50.   transform: translate3d(1125px, 0, 0) scale(0.8);
  51. }
  52. header .banner .slide-3d .item-list li.item7 {
  53.   transform: translate3d(1350px, 0, 0) scale(0.8);
  54. }
  55. header .banner .slide-3d .item-list li.item8 {
  56.   transform: translate3d(1575px, 0, 0) scale(0.8);
  57. }
  58. header .banner .slide-3d .item-list li.item9 {
  59.   transform: translate3d(1800px, 0, 0) scale(0.8);
  60. }
  61. header .banner .slide-2d .item-list li {
  62.   width: 1200px;
  63.   height: 300px;
  64.   transition: all 0.5s ease-out;
  65.   position: absolute;
  66.   top: 0;
  67.   left: 0;
  68. }
  69. header .banner .slide-2d .item-list li.item0 {
  70.   transform: translateX(-1200px);
  71. }
  72. header .banner .slide-2d .item-list li.item1 {
  73.   transform: translateX(0px);
  74. }
  75. header .banner .slide-2d .item-list li.item2 {
  76.   transform: translateX(1200px);
  77. }
  78. header .banner .slide-2d .item-list li.item3 {
  79.   transform: translateX(2400px);
  80. }
  81. header .banner .slide-2d .item-list li.item4 {
  82.   transform: translateX(3600px);
  83. }
  84. header .banner .slide-2d .item-list li.item5 {
  85.   transform: translateX(4800px);
  86. }
  87. header .banner .slide-2d .item-list li.item6 {
  88.   transform: translateX(6000px);
  89. }
  90. header .banner .slide-2d .item-list li.item7 {
  91.   transform: translateX(7200px);
  92. }
  93. header .banner .slide-2d .item-list li.item8 {
  94.   transform: translateX(8400px);
  95. }
  96. header .banner .slide-2d .item-list li.item9 {
  97.   transform: translateX(9600px);
  98. }
Raw Paste

Login or Register to edit or fork this paste. It's free.