<!DOCTYPE html> <html lang="en"> <head> <**** charset="UTF-8"> <title>3D LockedWorld Slider</title> ********* *{ margin: 0; padding: 0; box-sizing: border-box; } h2{ text-align: center; font-size: 40px; font-family: arial; margin-top: 80px; color: aqua; text-shadow: 0px 0px 6px black; } .lockedworld{ width: 210px; margin: auto; perspective: 800px; position: relative; margin-top: 60px; } .lockedworld2{ width: 100%; position: absolute; animation: rotar 10s infinite linear; transform-style: preserve-3d; } .lockedworld2:hover{ animation-play-state: paused; cursor: pointer; } .lockedworld2 figure{ width: 100%; height: 120px; overflow: hidden; position: absolute; box-shadow: 0px 0px 20px 0px black; transition: all 300ms; } .lockedworld2 figure:hover{ box-shadow: 0px 0px 0px 0px black; transition: all 300ms; } .lockedworld2 figure:nth-child(1){transform: rotateY(0deg) translateZ(300px);} .lockedworld2 figure:nth-child(2){transform: rotateY(40deg) translateZ(300px);} .lockedworld2 figure:nth-child(3){transform: rotateY(80deg) translateZ(300px);} .lockedworld2 figure:nth-child(4){transform: rotateY(120deg) translateZ(300px);} .lockedworld2 figure:nth-child(5){transform: rotateY(160deg) translateZ(300px);} .lockedworld2 figure:nth-child(6){transform: rotateY(200deg) translateZ(300px);} .lockedworld2 figure:nth-child(7){transform: rotateY(240deg) translateZ(300px);} .lockedworld2 figure:nth-child(8){transform: rotateY(280deg) translateZ(300px);} .lockedworld2 figure:nth-child(9){transform: rotateY(320deg) translateZ(300px);} .lockedworld2 figure:nth-child(10){transform: rotateY(360deg) translateZ(300px);} .lockedworld2 img{ width: 100%; transition: all 300ms; } .lockedworld2 img:hover{ transform: scale(1.2); transition: all 300ms; } [USER=350438]KeyF[/USER]rames rotar{ from{ transform: rotateY(0deg); }to{ transform: rotateY(360deg); } } </style> </head> <body> <div class="lockedworld"> <div class="lockedworld2"> <figure><img src="http://i.hizliresim.com/Qa37n3.jpg"></figure> <figure><img src="http://i.hizliresim.com/glWajO.jpg"></figure> <figure><img src="https://i.hizliresim.com/zBnQA9.jpg"></figure> <figure><img src="https://i.hizliresim.com/y0MMAa.jpg"></figure> <figure><img src="http://i.hizliresim.com/E3Dvl9.jpg"></figure> <figure><img src="http://k1304.hizliresim.com/18/l/m6mfp.jpg"></figure> <figure><img src="https://i.hizliresim.com/aG1dM2.jpg"></figure> <figure><img src="http://www.hizliresimyukle.com/images/2017/01/22/Basliksiz-10fd29.png"></figure> <figure><img src="http://i.hizliresim.com/qb0G6Q.png"></figure> </div> </div> </body> </html>
