├── README.md
├── img1.webp
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # 4k3dslider
2 |
--------------------------------------------------------------------------------
/img1.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/closeresty/4k3dslider/1a82cd0a72a4d6821bfc6eccc1aaca68fa113e43/img1.webp
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | 3D Slider
9 |
10 |
11 |
47 |
48 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | }
5 | .header {
6 | overflow: hidden;
7 | height: 100vh;
8 | width: 100vw;
9 | display: flex;
10 | justify-content: center;
11 | align-items: center;
12 | background: #252525;
13 | }
14 | .slider-box {
15 | width: 30vh;
16 | perspective: 1000px;
17 | position: relative;
18 | top: -17vh; /* height to top */
19 | padding-top: 10vh;
20 | }
21 | .carousel {
22 | width: 100%;
23 | transform-style: preserve-3d;
24 | animation: rotate 20s infinite linear; /* speed: */
25 | }
26 | .carousel .carousel-item {
27 | width: 100%;
28 | height: 25vh;
29 | position: absolute;
30 | overflow: hidden;
31 | }
32 | .it1 {
33 | transform: rotateY(0deg) translateZ(50vh);
34 | }
35 | .it2 {
36 | transform: rotateY(40deg) translateZ(50vh);
37 | }
38 | .it3 {
39 | transform: rotateY(80deg) translateZ(50vh);
40 | }
41 | .it4 {
42 | transform: rotateY(120deg) translateZ(50vh);
43 | }
44 | .it5 {
45 | transform: rotateY(160deg) translateZ(50vh);
46 | }
47 | .it6 {
48 | transform: rotateY(200deg) translateZ(50vh);
49 | }
50 | .it7 {
51 | transform: rotateY(240deg) translateZ(50vh);
52 | }
53 | .it8 {
54 | transform: rotateY(280deg) translateZ(50vh);
55 | }
56 | .it9 {
57 | transform: rotateY(320deg) translateZ(50vh);
58 | }
59 | .it10 {
60 | transform: rotateY(360deg) translateZ(50vh);
61 | }
62 | .carousel-item {
63 | box-shadow: 0px 0px 20px 0px #000;
64 | border-radius: 3vh;
65 | }
66 | .carousel .img {
67 | transition: ease-in-out 0.5s;
68 | width: 100%;
69 | height: 100%;
70 | }
71 | .carousel .img:hover {
72 | transform: scale(1.1);
73 | transition: all 0.5s;
74 | position: absolute;
75 | }
76 | .carousel:hover {
77 | animation-play-state: paused;
78 | cursor: pointer;
79 | }
80 | /* animation rotate */
81 | @keyframes rotate {
82 | from {
83 | transform: rotateY(0deg);
84 | }
85 | to {
86 | transform: rotateY(360deg);
87 | }
88 | }
89 |
--------------------------------------------------------------------------------
16 |