transform 所做的一系列变换,都仅仅只是这个元素的样子,元素自身所在文档流中所占用的位置不会发生变化,所以是不会影响到其他元素的位置的
2D
translate:平移,这点类似于 relative+top+left 的效果
skew(x,y):翻转,180deg 和 0deg 的效果是一致的,翻转的时候,两侧是保持原来一样平齐的,因为这是2D的,所以虽然说是翻转,但是给人感觉很奇怪,有点像是拉伸的感觉
绕Y轴旋转 绕X轴旋转
ratate:可理解成是绕z轴(垂直于屏幕)的旋转,而skew是绕x(水平方向)、y(上下方向)轴的旋转
matrix:transform只能有单个值(类似于上面的函数进行函数调用),所以不能纯粹把上面的东西简单用逗号组合在一起,通过使用matrix来实现各种效果的混合
3D
第一个要点是在父级元素上设置透视(透视声明只会应用到其第一个子元素上):-webkit-perspective: 200;
透视的值越大,就表示你的视点与 3D场景之间的景深越大。因此,如果想要一点隐约的 3D 效果,就增大透视值;如果想要非常明显的 3D 效果,则减小透视值
下一个要点:-webkit-transform-style: preserve-3d;
为了延续父元素的透视,我们给以上父容器中第一个子元素设定了 preserve-3d
transform-origin(x,y)
transform所做的任何变换都是基于一个基准点,默认的基准点就是元素的中心,可以通过transform-origin来改变变换的基准点
中点(默认值):transform-origin: 50% 50%;
左上角:transform-origin: 0% 0%;