css变形几大属性

Posted 2020-08-05 伊各

1、transform: transform-function() * | none;

　　transform-function: translate()、scale()、rotate()、skew()、matrix()。

2、transform-origin：用来指定元素的中心位置。

　　css3中的旋转、缩放、倾斜都可以通过transform-origin重置元素的原点，但其中的位移translate()始终以元素中心点进行位移。

　　设置Z轴上的方向时，百分比无效。

3、transform-style：flat (默认值，表示所有子元素呈现在2D平面。) | preserve-3d（所有子元素在3D平面呈现）

4、perspective：设置查看者位置，设置后才存在景深。设置于父元素之上。

　　perspective()作用于当前形变元素之上，与其他transform-function一起使用。

5、perspective-origin：决定perspective属性的原点角度。定义在父元素上，并必须与perspective一起使用。

6、backface-visibility：visible(背面可见) |hidden（不可见）