为了账号安全,请及时绑定邮箱和手机立即绑定

旋转角度的问题

 transform: translateZ(-25px) rotateX(90deg);

为什么移动为-25pX?

为什么旋转是沿着X轴,而不是Z轴?

正在回答

2 回答

perspective属性用来设置视点,在css3的模型中,视点是在Z轴所在方向上的。任务三设置了perspective为200px

translateX,translateY表现出在屏幕中的上下左右移动,translateZ的直观表现形式就是大小变化,实质是XY平面相对于视点的远近变化(说远近就一定会说到离什么参照物远或近,在这里参照物就是perspective属性)。比如设置了perspective为200px;那么translateZ的值越接近200,就是离的越近,看上去也就越大,超过200就看不到了,因为相当于跑到后脑勺去了,你不可能看到自己的后脑勺。(200-translateZ的值)就是视点和xy平面的距离(初始是屏幕的位置,此时translateZ的值为0)。

需要注意的一点是,整个坐标系中各各坐标轴的相对关系是固定的。正常情况下,视点和我们的眼睛是同一个方向的如同上面所讲。而当执行如rotateX(90deg)等旋转变换时,zy平面旋转,z轴和y轴的指向也会变化90度。此时z轴指向上方,视点也是在上方,此时我们从屏幕上看的就不是直观的元素大小变化,而是元素的升降变化,好像站在远处在看一部电梯或者你把书本平放举过头顶或下放那样,需要一点空间想象能力理解一下。


1 回复 有任何疑惑可以回复我~

首先,translate表示位移,并不存在translteZ情况。只有三种:translate,translateX,translateY。你可以看成坐标。有正方向和负方向,负值表示向负轴的方向位移。eg:translateX(-25px) ,表示水平方向左移25px。

rotateX表示沿X轴旋转。需要Z轴旋转应用rotateZ(90deg)。

望采纳!

0 回复 有任何疑惑可以回复我~
#1

慕仰1053334

解释不到位啊 而且这里就是用了translatez以perspective为参照的
2017-05-07 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

旋转角度的问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信