WHAT'S NEW?
Loading...

How To Make Rotation Image Slider Using HTML and CSS Codes

October 19, 2019 , , , , ,
In, this page I have posted HTML and CSS code to make a rotation image slider. Which looks very attractive in webpage. You can see the demo as given image rotation slider below. It is build using HTML and CSS animation codes.
Slider
This image slider is designed using HTML and CSS code Only. To make this type of image rotation slider click out the following HTML and CSS codes.

CSS Code 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
.slideshow{
 margin: 0 auto;
 height: 320px;
 background: none;
 box-sizing: border-box;
}
.content{
 margin: auto;
 width: 190px;
 perspective: 1000px;
 position: relative;
 padding-top: 80px;
}
.content-carrousel{
 width: 50%; 
 position: ablolute;
 float: right; 
 animation: rotar 15s infinite linear;
 transform-style: preserve-3d;
}
.content-carrousel:hover{
 animation-play-state: paused;
 cursor: pointer;
}
.content-carrousel figure{
 width: 100%;
 height: 120px;
 border: 1px solid #4d444d;
 overflow: hidden;
 position: absolute;
}
.content-carrousel figure:nth-child(1){
 transform: rotateY(0deg) translateZ(300px);
}
.content-carrousel figure:nth-child(2){
 transform: rotateY(40deg) translateZ(300px);
}
.content-carrousel figure:nth-child(3){
 transform: rotateY(80deg) translateZ(300px);
}
.content-carrousel figure:nth-child(4){
 transform: rotateY(120deg) translateZ(300px);
}
.content-carrousel figure:nth-child(5){
 transform: rotateY(160deg) translateZ(300px);
}
.content-carrousel figure:nth-child(6){
 transform: rotateY(200deg) translateZ(300px);
}
.content-carrousel figure:nth-child(7){
 transform: rotateY(240deg) translateZ(300px);
}
.content-carrousel figure:nth-child(8){
 transform: rotateY(280deg) translateZ(300px);
}
.content-carrousel figure:nth-child(9){
 transform: rotateY(320deg) translateZ(300px);
}
.shadow{
 position: absolute;
 box-shadow: 0px 0px 20px 0px #000; 
 border-radius: 3px;
}
.content-carrousel img{
 image-rendering: auto;
 transition: all 300ms;
 width: 100%; 
 height: 100%; 
}
.content-carrousel img:hover{
 transform: scale(1.2);
 transition: all 300ms; 
}
@keyframes rotar{
 form{
  transform: rotateY(0deg);
 }to{
  transform: rotateY(360deg);
 }
}

HTML Code 

Note : Save all the pictures in images folder. 


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html> 
<head> 
    <title>  </title> 
</head> 
<body>
     <section class="slideshow">
 <div class="content"> 
           <div class="content-carrousel"> 
     <figure class="shadow"> <img src="images/image_1.jpg" alt="" /> </figure>
     <figure class="shadow"> <img src="images/image_2.jpg" alt="" /> </figure>
     <figure class="shadow"> <img src="images/image_3.jpg" alt="" /> </figure>
     <figure class="shadow"> <img src="images/image_4.jpg" alt="" /> </figure>
     <figure class="shadow"> <img src="images/image_5.jpg" alt="" /> </figure>
     <figure class="shadow"> <img src="images/image_6.jpg" alt="" /> </figure>
     <figure class="shadow"> <img src="images/image_7.jpg" alt="" /> </figure>
     <figure class="shadow"> <img src="images/image_8.jpg" alt="" /> </figure>
     <figure class="shadow"> <img src="images/image_9.jpg" alt="" /> </figure>
         </div>
    </div> 
   </section>
</body>
</html>


0 comments:

Post a Comment

Follow:

Shared by Way Templates