css33d图片轮播_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) 是元素依照