Create a Image Sliding With 3D Effect By This Source Code
HTML Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>3D Nature & Animals</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="slideshow">
<div class="content">
<div class="carasoul">
<figure class="shadow"><img src="https://www.setaswall.com/wp-content/uploads/2017/03/Air-Show-4K-Wallpaper-3840x2160-768x432.jpg"></figure>
<figure class="shadow"><img src="https://cdn.wallpapersafari.com/58/68/6QKpiq.jpg"></figure>
<figure class="shadow"><img src="https://cdn.wallpapersafari.com/75/0/ViMt4p.jpg"></figure>
<figure class="shadow"><img src="https://cdn.wallpapersafari.com/42/90/w7ct9I.jpeg"></figure>
<figure class="shadow"><img src="https://cdn.wallpapersafari.com/91/91/6pnTYh.jpg"></figure>
<figure class="shadow"><img src="https://cdn.wallpapersafari.com/3/12/z8D5wK.jpg"></figure>
<figure class="shadow"><img src="https://www.setaswall.com/wp-content/uploads/2017/03/Glass-Ball-Reflection-4K-Wallpaper-3840x2160-768x432.jpg"></figure>
<figure class="shadow"><img src="https://images.unsplash.com/photo-1465247609274-27281ea86149?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1500&q=80"></figure>
<figure class="shadow"><img src="https://images.unsplash.com/photo-1551102076-9f8bb5f3f897?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80"></figure>
</div>
</div>
</section>
</body>
</html>
CSS Code
*{
margin:0;
padding:0;
}
.slideshow{
margin:0 auto;
width:100%;
height:100vh;
padding-top:150px;
background : url(https://i.pinimg.com/originals/b1/ed/f0/b1edf0ede7090904bc99068150287114.jpg) fixed;
}
.content{
margin: auto;
width:200px;
perspective:1000px;
padding-top:80px;
}
.carasoul{
width:100%;
animation:rotar 100s infinite linear;
transform-style: preserve-3d;
}
.carasoul:hover{
cursor: pointer;
animation-play-state: paused;
}
.carasoul figure{
width:100%;
height:200px;
position: absolute;
}
.carasoul figure:nth-child(1){
transform: rotateY(0deg) translateZ(300px);
}
.carasoul figure:nth-child(2){
transform: rotateY(40deg) translateZ(300px);
}
.carasoul figure:nth-child(3){
transform: rotateY(80deg) translateZ(300px);
}
.carasoul figure:nth-child(4){
transform: rotateY(120deg) translateZ(300px);
}
.carasoul figure:nth-child(5){
transform: rotateY(160deg) translateZ(300px);
}
.carasoul figure:nth-child(6){
transform: rotateY(200deg) translateZ(300px);
}
.carasoul figure:nth-child(7){
transform: rotateY(240deg) translateZ(300px);
}
.carasoul figure:nth-child(8){
transform: rotateY(280deg) translateZ(300px);
}
.carasoul figure:nth-child(9){
transform: rotateY(320deg) translateZ(300px);
}
.carasoul img{
image-rendering: auto;
transition: all 300ms;
width:100%;
height:100%;
}
.carasoul img:hover{
transform:scale(1.2);
transition: all 300ms;
border:1px solid;
border-radius:5px;
}
.shadow{
box-shadow: 0px 0px 20px 0px #000;
border-radius:5px;
}
@keyframes rotar{
from{
transform:rotateY(0deg);
}
to{
transform:rotateY(360deg)
}
}
Image Slide Output
Posts
38 Comments
Superb
ReplyDeleteWonderful
ReplyDeleteAmazing
ReplyDeletePerfect
ReplyDeleteWow Very interesting
ReplyDeleteAwesome Work
ReplyDeleteFantastic
ReplyDeleteFabulous idea
ReplyDeleteExcellent job
ReplyDeleteVery Good
ReplyDeleteKallu
ReplyDeleteVery nice
Awesome
ReplyDeleteAwesome
ReplyDeleteWonderful
ReplyDeleteWonderful
ReplyDeleteWonderful
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFantastic
ReplyDeleteFabulous
ReplyDeleteFabulous
ReplyDeleteFabulous
ReplyDeleteFabulous
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteExcellent
ReplyDeleteAmazing
ReplyDeleteExcellent👍
ReplyDeleteGood
ReplyDeleteHarrah's Atlantic City - MapYRO
ReplyDeleteHarrah's Resort 남원 출장마사지 Atlantic City locations, rates, 양주 출장안마 amenities: expert Atlantic City research, only 영천 출장샵 at Hotel and Travel Index. Realtime 인천광역 출장샵 driving 이천 출장안마 directions to Harrah's