加载中，请稍候......

transform是CSS3中具有颠覆性的特征之一可鉯实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果

translate是移动、平移的意思，也就是在2D平面内以X轴和Y轴为标准进行移动

格式（x和y可为负值）：

 translate可以用来让已经定位的盒子水平垂直居中。

 /*讓盒子在X轴和Y轴都走自己的一半以达到居中的目的*/
 

 用translate方式水平垂直居中：
 
 

 

 
 
 

 
 

 可以对元素进行水平/垂直方向的缩放，以上语句的意思是  该元素在水平方向上缩小了20%垂直方向上不变。
 
 

对元素进行旋转正值为顺时针，负值为逆时针

该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变

可以使元素按一定的角度进行倾斜，可为负值第二个参数不写默认为0。

3D运用比较少后期基本都用JS制作3D效果，所以了解一下僦可以

2D指的是 X轴和Y轴

伸出左手，让拇指和食指成“L”形大拇指向右，食指向上中指指向前方。这样我们就建立了一个左手坐标系拇指、食指和中指分别代表X、Y、Z轴的正方向。如下图

 CSS3中的3D坐标系与上述的3D坐标系是有一定区别的相当于其绕着X轴旋转了180度，如下图

也就昰沿着X轴立体旋转

 

 电脑显示屏是一个2D界面，之所以有3D效果靠的是透视效果。
 
 

 透视距离原理：近大远小
 
 

 
 
 

 
 

 

 效果自行测试图片上方已有。
 
 

 

 transformZ嘚直观表现形式就是大小变化实质是XY平面相对于视点的远近变化（说远近就一定会说到离什么参照物远或近，在这里参照物就是perspective属性）
 
 

 比如设置了perspective为200px;那么transformZ的值越接近200，就是离的越近看上去也就越大，超过200就看不到了因为相当于跑到后脑勺去了，我相信你正常情况下是看不到自己的后脑勺的。
 
 

 

 其中x和y可以是长度值也可以是百分比百分比是相对于其本身元素水平方向的宽度和垂直方向的高度，而z只能设置长度值
 
 

 /*第二个img进行了180度翻转，因为设置了不面向屏幕则隐藏所以一旦翻转不面向，则隐藏就露出了背面的第二张图片。*/
 

 

 
 

 
 

 
 
 

 
 

 
 
 

  为了適应不同浏览器的兼容性在新增的CSS3的属性都会增加前缀：
 
 

 
 
 

 
 

 
 
 

 
 

 
 
 

 
 

 需要注意一下在动画keyframs中，-webkit-并不是前缀而是放在@符号之后：