css初步了解transform

一、transform

1.transform-origin

设置或检索对象以某个原点进行转换
left： 指定原点的横坐标为left
center①： 指定原点的横坐标为center
right： 指定原点的横坐标为right
top： 指定原点的纵坐标为top
center②： 指定原点的纵坐标为center
bottom： 指定原点的纵坐标为bottom
也可以使用百分数或者相对于左顶点的像素值

transform-origin: 16px 76px;
transform-origin: 50% 50%;
transform-origin: center center;

也可以进行3d转换（图中远点为3d空间上的旋转中心）

transform: rotateY(40deg);
transform-origin: 100px 100px 100px;

transform: rotateY(80deg);
transform-origin: 100px 100px 100px;

2.transform-style

指定某元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化
flat： 默认值，指定子元素位于此元素所在平面内
preserve-3d： 指定子元素定位在三维空间内

3.perspective

指定透视点的位置
none： 默认值，不指定透视
： 指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值

4.perspective-origin

： 用百分比指定透视点坐标值，相对于元素宽度。可以为负值。
： 用长度值指定透视点坐标值。可以为负值。
left： 指定透视点的横坐标为left
center①： 指定透视点的横坐标为center
right： 指定透视点的横坐标为right
top： 指定透视点的纵坐标为top
center②： 指定透视点的纵坐标为center
bottom： 指定透视点的纵坐标为bottom

5.backface-visibility

指定元素背面面向用户时是否可见
visible： 指定元素背面可见，允许显示正面的镜像。
hidden： 指定元素背面不可见