旋转角度的问题
transform: translateZ(-25px) rotateX(90deg);
为什么移动为-25pX?
为什么旋转是沿着X轴,而不是Z轴?
transform: translateZ(-25px) rotateX(90deg);
为什么移动为-25pX?
为什么旋转是沿着X轴,而不是Z轴?
2017-04-15
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轴指向上方,视点也是在上方,此时我们从屏幕上看的就不是直观的元素大小变化,而是元素的升降变化,好像站在远处在看一部电梯或者你把书本平放举过头顶或下放那样,需要一点空间想象能力理解一下。
举报