CSS3 位移转换 translate3d()translatez()应用实例

　　CSS3转换中的对象（div、ul li等）位移变换分为2d与3d两种情况，2d即对象在平面中移动，3d即对象在空间中移动；2d的平移在前面的文章中已经介绍过，本篇介绍3d的情况，与2d不同的是多一个Z坐标轴。

　　由于 translate3d 要用到 translatez，所以在介绍它之前需要先了解 translatez。下面先介绍translatez和translate3d的语法规则，再分别分享一个应用实例。

 

　　一、translatez语法规则

　　 translatez(<length>)

　　 语法规则比较简单，<length>表示对象在Z轴的位移，例如 50px。

 

　　二、translate3d语法规则

　　translate3d(<translation-value>, <translation-value>, <length>)

　　第一个<translation-value>：设置对象在X轴的位移，不能省略，取值可用百分比或长度；

　　第二个<translation-value>：设置对象在Y轴的位移，不能省略，取值可用百分比或长度；

　　<length>：设置对象在Z轴的位移，不能省略。

 

　　三、translatez()和translate3d()应用实例

　　1、translatez()应用实例

　　html代码：

　　<div class="translatez">transform:translatez(150px)</div>

　　CSS样式：

　　.translatez{transform:translatez(150px);width:230px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

　　效果图：

 

 

　　2、translate3d()应用实例

　　html代码：

　　<div class="translate3d">transform:translate3d(100px,120px,200px);</div>

　　CSS样式：

　　.translate3d{transform:translate3d(100px,120px,200px);width:350px;height:100px; border:1px solid #ab9595;background-color:#e3e2e0; padding:8px;}

　　效果图：