translate3d()

语法

translate3d(tx, ty, tz)

常量

tx

是一个 <length> 代表移动向量的横坐标。

ty

是一个 <length> 代表移动向量的纵坐标。

tz

是一个 <length> 代表移动向量的z坐标。它不能是 <percentage> 值；那样的移动是没有意义的。

单轴变化示例

HTML

1 <p>foo</p>
2 <p class="transformed">bar</p>
3 <p>foo</p>

 

CSS

 1 p { 
 2   width: 50px;
 3   height: 50px;
 4   background-color: teal;
 5 }
 6 
 7 .transformed {
 8   transform: perspective(500px) translate3d(10px,0px,0px);
 9   /* equivalent to perspective(500px) translateX(10px)*/
10   background-color: blue;
11 }

 

转载于:https://www.cnblogs.com/2734156755z/p/9273463.html