1.Web前端之CSS3中3D立方体以及3D轮播图

1.3D坐标系

3D坐标可以用左手来模拟，其中大拇指方向默认是X轴正方向，食指方向是Y轴正方向，中指方向是Z轴正方向。注意：当设置transform：rotateX（90deg）时，相当于将X轴转动90°，此时Z轴正方向向上，所以设置transform：translateZ(150px)时，就产生了3D立方体的上面，具体原理可以通过chrome浏览器审查元素来调试。

2.3D视图

　　transform-style：flat(默认，二维效果) / preserve-3d(三维效果)。设置一个元素的transform-style:preserve-3d；只影响这个元素的子元素(如果孙元素也有3d效果，那么还必须给子元素设置preserve-3d)。这样所有子元素都可以相对与父元素的平面进行3d变形操作。和二维变形一样，三维变形可以使用transform属性来设置。可以通过制定的函数或者通过三维矩阵来对元素变型。列举几个函数：

　　translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写，如：translateX(length),translateY(length), translateZ(length)。注意z轴的值只能为px;

　　scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleY()。

　　rotateX(angle) 是元素依照x轴旋转；

　　rotateY(angle) 是元素依照y轴旋转；

　　rotateZ(angle) 是元素依照z轴旋转。

3.perspective和transform-style的设置问题

（1）当设置perspective(length);不设置transform-style:preserve-3d；当元素静止时，会有立体的效果：

（2）当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：

（3）当设置transform-style:preserve-3d；不设置perspective(length);当元素静止时，不会有立体的效果：

（4）当设置perspective(length);不设置transform-style:preserve-3d；当元素旋转时的效果：

注意：（1）如果一个元素以x轴或y轴旋转90度以上的话，那么它的背面将面向用户。背面的元素始终是透明的，所以用户通过后面看到正面的反向形态，就像是从在玻璃门后面看对外张贴的标志。为了防止显示镜像的前面。可以将backface-visibility设置为hidden;如果backface-visibility:hidden;那么这个元素就不会在背面可见了。这么做的一个原因就是，想一个元素有两个面，就像一个扑克牌。比如：创建一张扑克牌，正面和背面一定不一样，这两个面的位置是背靠背的。这两个元素一起转动，正面逐步向后反转隐藏，同时背面向前反转并出现。如果背面的元素是可见的，旋转时它将掩盖它底下的元素，而不是露出它下面的元素。

　　　（2）如果父元素设置overflow：hidden；那么子元素就无法跳出父元素的平面，也就不能出现3D效果。就如同，transform-style：flat；

3.自己做得3D立方体

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.box{width: 200px;height: 200px;margin: 100px auto;font-size: 30px;color:red;line-height: 200px;position: relative;text-align: center;perspective:1000px;transform-style: preserve-3d;transform:rotateX(-30deg) rotateY(30deg);}.front, .back, .left, .right, .top, .bottom{width: 100%;height: 100%;opacity: 0.5;position: absolute;left: 0;top: 0;}.front{background-color: pink;transform: translateZ(100px);}.back{background-color: orange;transform: translateZ(-100px);}.left{background-color: blue;transform: rotateY(-90deg) translateZ(100px);}.right{background-color: red;transform: rotateY(90deg) translateZ(100px);}.top{background-color: green;transform: rotateX(-90deg) translateZ(-100px);}.bottom{background-color: yellowgreen;transform: rotateX(-90deg) translateZ(100px);}</style>
</head>
<body><div class="box"><div class="front">front</div><div class="back">back</div><div class="left">left</div><div class="right">right</div><div class="top">top</div><div class="bottom">bottom</div></div></body>
</html>

4.详细说明参照原地址

http://www.cnblogs.com/duanhuajian/archive/2012/08/30/2664026.html

5.扩展内容

有了3D的原理，我们就可以实现3D轮播图动画效果了，原理就是每个li标签有4个面，分别是前、后、上、下，相当于剔除了3D立方体的左右两面，再将每个li标签添加过渡动画：transition:all 1s linear;并且每个li之间必须有延时操作，代码中的图片自己可以从网上下载，但是注意图片的大小跟盒子的大小要匹配，具体参照如下源码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3D轮播图</title><style>html,body{height: 100%;}body{margin: 0;padding: 0;background-color: #F7F7F7;}.banner{width: 560px;height: 300px;margin: 100px auto;border: 1px solid #CCC;position: relative;}ul{list-style: none;margin: 0;padding: 0;height: 100%;}li{position: absolute;top: 0;width: 112px;height: 100%;background-color: green;transform: rotateX(0deg);transform-style: preserve-3d;transition: all 1s;}li:nth-child(1){left: 0;}li:nth-child(2){left: 112px;}li:nth-child(3){left: 224px;}li:nth-child(4){left: 336px;}li:nth-child(5){left: 448px;}span{display: block;height: 100%;width: 100%;position: absolute;left: 0;top: 0;}li span:nth-child(1){transform: translateZ(150px);background-image: url(images/1.jpg);}li span:nth-child(2){transform: rotateX(90deg) translateZ(150px);background-image: url(images/2.jpg);}li span:nth-child(3){transform: rotateX(180deg) translateZ(150px);background-image: url(images/3.jpg);}li span:nth-child(4){transform: rotateX(270deg) translateZ(150px);background-image: url(images/4.jpg);}li:nth-child(1) span{background-position: 0 0;}li:nth-child(2) span{background-position: -112px 0;}li:nth-child(3) span{background-position: -224px 0;}li:nth-child(4) span{background-position: -336px 0;}li:nth-child(5) span{background-position: -448px 0;}.prev, .next{display: block;width: 60px;height: 60px;text-align: center;line-height: 60px;font-size: 40px;color: #FFF;text-decoration: none;background-color: rgba(0, 0, 0, 0.5);position: absolute;top: 50%;margin-top: -30px;}.next {right: 0;}</style>
</head>
<body><div class="banner"><ul><li><span></span><span></span><span></span><span></span></li><li><span></span><span></span><span></span><span></span></li><li><span></span><span></span><span></span><span></span></li><li><span></span><span></span><span></span><span></span></li><li><span></span><span></span><span></span><span></span></li></ul><a href="javascript:;" class="prev">&lt;</a><a href="javascript:;" class="next">&gt;</a></div><script src="jquery.min.js"></script><script>var current = 0;$('.prev').on('click',function(){current--;$('li').each(function(key){$(this).css({'transform':'rotateX('+current*90+'deg)','transition-delay':key*0.25+'s'});});});$('.next').on('click',function(){current++;$("li").each(function(key){$(this).css({'transform':'rotateX('+(-current)*90+'deg)','transition-delay':key*0.25+'s'});});});</script>
</body>
</html>

转载于:https://www.cnblogs.com/rained/p/6169286.html