"3d image slider"
Bootstrap 3.3.0 Snippet by dhaneshk

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <h1>3d images gallery</h1> <div class="container"> <div id="carousel"> <figure><img src="https://www.google.co.in/imgres?imgurl=http%3A%2F%2Fwww.quotezone.co.uk%2Fassets%2Fimages%2Fshowcase%2Fproduct-home.png&imgrefurl=http%3A%2F%2Fwww.quotezone.co.uk%2Fhome-insurance.htm&docid=qZa4txWjaVts2M&tbnid=0O-oSm2O2yHPCM%3A&vet=10ahUKEwikquyLrOPTAhUCN48KHfRAD_QQMwg5KAAwAA..i&w=411&h=239&bih=638&biw=1366&q=home&ved=0ahUKEwikquyLrOPTAhUCN48KHfRAD_QQMwg5KAAwAA&iact=mrc&uact=8" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/2" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/3" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/4" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/5" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/6" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/7" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/nature/8" alt=""></figure> <figure><img src="http://lorempixel.com/186/116/people/9" alt=""></figure> </div> </div> </html>
@import url(http://fonts.googleapis.com/css?family=Anaheim); *{ margin: 0; padding: 0; outline: none; border: none; box-sizing: border-box; } *:before, *:after{ box-sizing: border-box; } html, body{ min-height: 100%; } body{ background-image: radial-gradient(mintcream 0%, lightgray 100%); } h1{ display: table; margin: 5% auto 0; text-transform: uppercase; font-family: 'Anaheim', sans-serif; font-size: 4em; font-weight: 400; text-shadow: 0 1px white, 0 2px black; } .container{ margin: 4% auto; width: 210px; height: 140px; position: relative; perspective: 1000px; } #carousel{ width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; animation: rotation 20s infinite linear; } #carousel:hover{ animation-play-state: paused; } #carousel figure{ display: block; position: absolute; width: 90%; height: 50%px; left: 10px; top: 10px; background: black; overflow: hidden; border: solid 5px black; } #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);} #carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);} #carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);} #carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);} #carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);} #carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);} #carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);} #carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);} #carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);} img{ -webkit-filter: grayscale(1); cursor: pointer; transition: all .5s ease; } img:hover{ -webkit-filter: grayscale(0); transform: scale(1.2,1.2); } @keyframes rotation{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } }

Related: See More

Gaia Bootstrap Template
Image Crop jQuery
Client or Partners Logo Slider
Timely Login slider

Questions / Comments: