3d css gallery js

Solutions on MaxInterview for 3d css gallery js by the best coders in the world

showing results for - "3d css gallery js"

04 Mar 2020

1<html>
2    <head>
3        <style>
4            .slideshow{
5                margin: 0 auto;
6                padding-top: 50px;
7                height: 700px;
8                background: skyblue;
9                box-sizing: border-box;
10            }
11            .content{
12                margin: auto;
13                width: 190px;
14                perspective: 1000px;
15                position: relative;
16                padding-top: 80px;
17            }
18            .content-carrousel{
19                width: 100%;
20                position: absolute;
21                float: right;
22                animation: rotar 15s infinite linear;
23                transform-style: preserve-3d;
24            }
25            .content-carrousel:hover{
26                animation-play-state: paused;
27                cursor: pointer;
28            }
29            .content-carrousel figure{
30                width: 100%;
31                height: 120px;
32                border: 1px solid #4d444d;
33                overflow: hidden;
34                position: absolute;
35            }
36            .content-carrousel figure:nth-child(1){
37                transform: rotateY(0deg) translateZ(300px);
38            }
39            .content-carrousel figure:nth-child(2){
40                transform: rotateY(40deg) translateZ(300px);
41            }
42              
43            .content-carrousel figure:nth-child(3){
44                transform: rotateY(80deg) translateZ(300px);
45            }
46              
47            .content-carrousel figure:nth-child(4){
48                transform: rotateY(120deg) translateZ(300px);
49            }
50               
51            .content-carrousel figure:nth-child(5){
52                transform: rotateY(160deg) translateZ(300px);
53            }
54               
55            .content-carrousel figure:nth-child(6){
56                transform: rotateY(200deg) translateZ(300px);
57            }
58               
59            .content-carrousel figure:nth-child(7){
60                transform: rotateY(240deg) translateZ(300px);
61            }
62               
63            .content-carrousel figure:nth-child(8){
64                transform: rotateY(280deg) translateZ(300px);
65            }
66               
67            .content-carrousel figure:nth-child(9){
68                transform: rotateY(320deg) translateZ(300px);
69            }
70            .content-carrousel figure:nth-child(10){
71                transform: rotateY(360deg) translateZ(300px);
72            }
73            .shadow{
74                position: absolute;
75                box-shadow: 0px 0px 20px 0px #000;
76                border-radius: 2px;
77            }
78            .content-carrousel img{
79                image-resolution: auto;
80                transition: all 300ms;
81                width: 100%;
82                height: 100%;
83            }
84            .content-carrousel img:hover{
85                transform: scale(1.2);
86                transition: all 300ms;
87            }
88            @keyframes rotar{
89                froom{
90                    transform: rotateY(0deg);
91                } to{
92                    transform: rotateY(360deg);
93                }
94            }
95        </style>
96    </head>
97    <body>
98           <!--use your own images-->
99        <section class="slideshow">
100            <div class="content">
101                <div class="content-carrousel">
102                    <figure class="shadow"><img src= "img_1.jpg"></figure>
103                    <figure class="shadow"><img src= "img_2.jpg"></figure>
104                    <figure class="shadow"><img src= "img_3.jpg"></figure>
105                    <figure class="shadow"><img src= "img_4.jpg"></figure>
106                    <figure class="shadow"><img src= "img_5.jpg"></figure>
107                    <figure class="shadow"><img src= "img_6.jpg"></figure>
108                    <figure class="shadow"><img src= "img_7.jpg"></figure>
109                    <figure class="shadow"><img src= "img_8.jpg"></figure>
110                    <figure class="shadow"><img src= "img_9.jpg"></figure>
111                </div>
112            </div>
113        </section>
114        <script>
115            
116        </script>
117    </body>
118</html>

Amberly

13 Jul 2018

1how to use this code in razor syntax please help
2