translate3d

translate()和translate3d()函数可以实现指定轴上元素的平移。函数用于转换CSS中属性转换的属性值。实现转换的函数类型有:

translate()：2D平面实现X轴、Y轴的平移translate3d()：3D空间实现位置的平移translateX()：实现X轴方向的元素移动translateY()：实现Y轴方向的元素移动translate()

translate()函数用于移动元素在2D平面中的位置，其语法格式如下:

Translate(tx)或translate(tx，ty)tx:要移动的X轴距离ty:要移动的Y轴距离示例代码如下:

& ltstyle & gt。集装箱。翻译& gtdiv & gtdiv { display:inline-block；填充:30px背景色:浅绿色；}.集装箱。翻译& gtdiv & gt。result { transform:translate(-10px，10px)；背景色:红色；} & lt/style & gt；& ltdiv class = & # 34翻译& # 34；& gt& lth3 & gt翻译功能使用

translate3d()

translate3d()函数用于在3D空之间移动元素。语法格式如下:

Translate3d(tx，ty，tz)tx:移动元素的x轴位置。Ty:移动元素的y轴位置。Tz:移动元素的z坐标，不能是百分比。示例代码如下:

& ltstyle & gt。container .translate3d & gtdiv & gtdiv { display:inline-block；填充:30px背景色:浅绿色；}.container .translate3d & gtdiv & gt。result { transform:perspective(500 px)translate 3d(10px，0px，100px)；背景色:红色；} & lt/style & gt；& ltdiv class = & # 34translate3d & # 34& gt& lth3 & gttranslate3d函数使用

translateX()

translateX()函数用于在2D平面上移动X轴距离，其语法格式如下:

translateX(t)的示例代码如下:

& ltstyle & gt。集装箱。translateX & gtdiv & gtdiv { display:inline-block；填充:30px背景色:浅绿色；}.集装箱。translateX & gtdiv & gt。result { transform:translate x(100px)；背景色:红色；} & lt/style & gt；& ltdiv class = & # 34translateX & # 34& gt& lth3 & gttranslateX函数使用

translateY()

translateY()函数用于在2D平面上移动Y轴距离，其语法格式如下:

translateY(t)的示例代码如下:

& ltstyle & gt。集装箱。translateY & gtdiv & gtdiv { display:inline-block；填充:30px背景色:浅绿色；}.集装箱。translateY & gtdiv & gt。result { transform:translate y(10px)；背景色:红色；} & lt/style & gt；& ltdiv class = & # 34translateY & # 34& gt& lth3 & gttranslateY函数使用

ranslateZ()

translateZ()函数用于移动3D空之间的z轴距离，其语法格式如下:

translateZ(t)的示例代码如下:

& ltstyle & gt。集装箱。translateZ & gtdiv & gtdiv { display:inline-block；填充:30px背景色:浅绿色；}.集装箱。translateZ & gtdiv & gt。result { transform:perspective(200 px)translate z(-100 px)；背景色:红色；} & lt/style & gt；& ltdiv class = & # 34translateZ & # 34& gt& lth3 & gttranslateZ函数使用