24.css-3D形变

3D形变

一、设置3D环境

1.perspective：景深

需要把景深 perspective 设置在3D环境的父级上

他的默认值是 none，值是具体的数值，不可以是百分比，因为z轴没有百分比，也不能是0或者负值

2.使用 transform-style 设置3D效果

默认值是 flat，表示2D

preserve-3d 表示3D

3.使用 perspective-origin 设置透视点的位置

1. 可以是 left top right bottom centr 等方位名词组合
2. 可以是具体数值
3. 可以是百分比

perspective-origin：x轴的位置 y轴的位置

以上三个关于3D设置的属性都设置在 3D环境的父级上

.wp{
    width: 600px;
    height: 600px;
    border: 1px #f00 solid;
    margin: 20px auto;
    /* 设置景深 */
    perspective: 8000px;
    display: flex;
    align-items: center;
    justify-content: center; 
    /* 设置3d效果 */
    transform-style: preserve-3d;
    /* 设置透视点 */
    perspective-origin:0,0;
}

二、3D平移

可以使用 translate3d(x,y,z)

也可以单独使用 translateZ(z)

三、3D旋转

分开写法

1. rotateX(num):num为正，以上边为基准，上边往视窗的里面翻转，num为负，上边往视窗的外面翻转
2. rotateY(num):num为正，以左边为基准，左边往视窗的里面翻转，num为负，左边往视窗的外面翻转
3. rotateZ(num)
   合写

rotate3d(x倍数,y倍数,z倍数，度数)

rotate3d(1,2,3,40deg)

x轴旋转40度，y轴旋转80度，z轴旋转120度

查看元素从后面看能否看到元素内容

backface-visibility
值
1. visible 默认值，能看到
2. hidden 不能看到