一、transform: rotateX() rotateY()
先要将图片进行旋转。
rotateX(30deg)变成了
有点难理解。附上几何图(侧面视角)：
rotateY(30deg):
同样的道理，几何图（顶部视角）：
然后就可以将图片进行旋转，准备了8张图片需要旋转的角度为（360/8 = 45deg）。
<style type="text/css">
._container{width: 300px;height: 150px;margin: 0 auto;}
img{width: 300px;height: 150px;position: absolute;cursor: pointer;}
img:nth-child(1){transform: rotateY(0deg);}
img:nth-child(2){transform: rotateY(45deg);}
img:nth-child(3){transform: rotateY(90deg);}
img:nth-child(4){transform: rotateY(135deg);}
img:nth-child(5){transform: rotateY(180deg);}
img:nth-child(6){ransform: rotateY(225deg);}
img:nth-child(7){transform: rotateY(270deg);}
img:nth-child(8){transform: rotateY(315deg);}
</style>
<body>
<div class="_container">
<img src="img/rotate_translate1.jpg"/>
<img src="img/rotate_translate2.jpg"/>
<img src="img/rotate_translate3.jpg"/>
<img src="img/rotate_translate4.jpg"/>
<img src="img/rotate_translate5.jpg"/>
<img src="img/rotate_translate6.jpg"/>
<img src="img/rotate_translate7.jpg"/>
<img src="img/rotate_translate8.jpg"/>
</div>
</body>
= =接着我们发现图片都堆成一堆
二、transform-style: preserve-3d;
由于图片堆在了一起我们给他加个transform-style: preserve-3d;
这样图片将以3d视角展示
._container{width: 300px;height: 150px;margin: 0px auto;transform-style: preserve-3d; }
效果图：
额.......图片都黏在一起了。
三、transform: translateZ()
这是tranlate的正负值图。因此我们需要将图片都沿着Z轴方向平移一定长度。
注意 ：这里的translate坐标为图片坐标，因此当图片rotate的时候，坐标也跟着rotate,所以可以将img的tranlateZ都置为相同的值
这样的话所有图片都离远点的Z方向是相同的。
算出了translateZ的值约等于482.86px
img:nth-child(1){transform: rotateY(0deg) translateZ(482.86px); }
img:nth-child(2){transform: rotateY(45deg) translateZ(482.86px); }
img:nth-child(3){transform: rotateY(90deg) translateZ(482.86px); }
img:nth-child(4){transform: rotateY(135deg) translateZ(482.86px); }
img:nth-child(5){transform: rotateY(180deg) translateZ(482.86px); }
img:nth-child(6){transform: rotateY(225deg) translateZ(482.86px); }
img:nth-child(7){transform: rotateY(270deg) translateZ(482.86px); }
img:nth-child(8){transform: rotateY(315deg) translateZ(482.86px); }
效果图：
有人说看过去怎么跟2d一样。博主你在逗我么？其实已经是3d视角了。只是我们是从正面看过的。即几何模型的主视图。
我们可以将容器_container向前旋转10deg即（rotateX(-10deg)）.
._container{width: 300px;height: 150px;margin: 100px auto;transform-style: preserve-3d;transform: rotateX(-10deg); }
结果图：
有点样子出来了。
四、perspective
这个是个好东西。
为什么有些图看过去像3d图呢？
就好比一个正方体在你的面前。当你的视角慢慢的从0~远离。你看到的正方体会从原来0视角的正方形慢慢的变成正方体。
perspective干的事就是讲我们距离屏幕一定视角的图片成现在显示器中
所以我们假设perspective:3000px；
就是我们眼睛距离屏幕3000px时观看到的效果。呈现在显示器中。
效果图：
那么问题来了,这个perspective是加在哪个位置呢？
假设我们加在container上面，那么我们的图片开始转动的时候（即转动container==>raotateY()）
那么我们的视角和上面说的translate的坐标一样会随的图片的转动而变化。
然后出现奇葩的图片。
因此我们需要在container外面加一个box给box加视角perspective。
即
.box{perspective: 3000px;}
<div class="box">
<div class="container">
...
</div>
</div>
这样弄的话视角就永远不会变动，因为转动的是container。
五、perspective-origin
可能有的人想把外层box设个宽度或者高度什么的。
所以就要设计3d基点设置（perspective-origin）。
前面说perspective视角是屏幕前的位置。现在perspective-origin则为在屏幕内的哪个位置。
即你在正方体前面的500px的位置绕着正方体不同的角度看过去效果也会不同。
这里的3d基点则制定正向位置点。
效果图：
原始基点为：默认perspective-origin: 50% 50%;
然后就可以设置些js来让图片滚动了。
六、代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ._area{ height:250px; width: 1200px; perspective: 3000px; perspective-origin: 599px 146px; margin: 0 auto; padding-top: 100px; } .box{ height: 150px; width: 300px; transform: rotateX(-8deg); transform-style: preserve-3d; transition-duration: 1s; margin: 0 auto; } img{ width: 300px; height: 150px; position: absolute; cursor: pointer; } img:nth-child(1){ transform: rotateY(0deg) translateZ(400px); } img:nth-child(2){ transform: rotateY(45deg) translateZ(400px); } img:nth-child(3){ transform: rotateY(90deg) translateZ(400px); } img:nth-child(4){ transform: rotateY(135deg) translateZ(400px); } img:nth-child(5){ transform: rotateY(180deg) translateZ(400px); } img:nth-child(6){ transform: rotateY(225deg) translateZ(400px); } img:nth-child(7){ transform: rotateY(270deg) translateZ(400px); } img:nth-child(8){ transform: rotateY(315deg) translateZ(400px); } ul{ list-style: none; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } li{ background-color: #000; width: 10px; height: 10px; border-radius: 50%; float: left; margin-left: 5px; cursor: pointer; } </style> </head> <body> <div class="_area"> <div class="box"> <img src="img/rotate_translate1.jpg"/> <img src="img/rotate_translate2.jpg"/> <img src="img/rotate_translate3.jpg"/> <img src="img/rotate_translate4.jpg"/> <img src="img/rotate_translate5.jpg"/> <img src="img/rotate_translate6.jpg"/> <img src="img/rotate_translate7.jpg"/> <img src="img/rotate_translate8.jpg"/> </div> <ul> <li style="background-color: #666;"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> <script type="text/javascript"> var x = 0; var index = 0; var timer; var box = document.getElementsByClassName("box")[0]; var li = document.getElementsByTagName("ul")[0].getElementsByTagName("li"); //滚动函数 function roll(){ x =x - 45; index = (index == 7)?0:(index+1); for(var i=0;i<li.length;i++){ li[i].style.backgroundColor = "#000"; } li[index].style.backgroundColor = "#666"; box.style.transform = "rotateX(-8deg) rotateY("+x+"deg)"; } //切换页面的时候调用(切换页面时本页面还在计时,防止切换页面回来时瞬间快速滚动。) var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' : null; var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange'); //替换hiddenProperty中的hidden(忽略大小写即Hidden也会被替换形成webkitvisibilitychange) var onVisibilityChange = function(){ if (!document[hiddenProperty]) { timer = setInterval(roll,2000); }else{ clearInterval(timer); } } document.addEventListener(visibilityChangeEvent,onVisibilityChange); //点击图片滚动 box.onclick = function(){ clearInterval(timer); roll(); setTimeout(function(){ clearInterval(timer); timer = setInterval(roll,2000); },2000); } timer = setInterval(roll,2000); //点击小圆点滚动 for(var i =0;i<li.length;i++){ li[i].xuhao = i; li[i].onclick = function(){ clearInterval(timer); for(var i=0;i<li.length;i++){ li[i].style.backgroundColor = "#000"; } li[this.xuhao].style.backgroundColor = "#666"; x = x+(index-this.xuhao)*45; box.style.transform = "rotateX(-8deg) rotateY("+x+"deg)"; index = this.xuhao; setTimeout(function(){ clearInterval(timer); timer = setInterval(roll,2000); },2000); } } </script> </html>
效果图：
七、兼容性
尽管perspective支持IE10
transform-style支持不了IE。所以只能跟IE say goodbye.
| chrome | firefox | IE |
| √ | √ | × |