<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3D picture transfer</title> <link rel="stylesheet" href="public.css"> </head> <body> <div id="wrap"> <div id="stage"> <img src="images/1.png" alt=""> <img src="images/2.png" alt=""> <img src="images/3.png" alt=""> <img src="images/4.png" alt=""> </div> </div> <script src="public.js"></script> </body> </html>
#wrap{ width: 400px; height: 300px; position: absolute; left: 50%; top:300px; margin-left: -200px; perspective:800px; border:1px solid red; } #stage{ width: 300px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -100px; transform-style:preserve-3d; transition:all 1s ease-in; } img{ width: 300px; height: 200px; position: absolute; } img:nth-child(1){ transform:rotateY(0deg) translateZ(150px); } img:nth-child(2){ transform:rotateY(90deg) translateZ(150px); } img:nth-child(3){ transform:rotateY(180deg) translateZ(150px); } img:nth-child(4){ transform:rotateY(270deg) translateZ(150px); }
window.onload=function(){ var kk=0; var aa=document.getElementById("stage"); var timer=setInterval(function(){ kk+=90; aa.style.transform="rotateY("+kk+"deg)"; },1000) }