css：transform的3D变换属性

1.空间三维坐标：

在文中之前，先介绍空间三维坐标，其中的坐标轴以及正负方向如图所示：
在这里插入图片描述

2.不可缺少的perspective属性

perspective属性:规定3D元素的透视效果，决定了网页中的元素是2D的变换还是3D的变换，不定义该属性，便没有3D效果。css 3D transform的透视点是在浏览器的前方,需要设置该元素或者该元素的父元素的perspective大小
perspective的两种写法：
1.在父元素上设置perspective大小再在子元素上写transfrom属性：
在这里插入图片描述
2.在当前元素上，与transform的其他属性写在一起。

3.translate3d（x,y,z)

translate3d（x,y,z)定义3D平移，x,y,z分别对应x轴、y轴、z轴的平移。
或者translateX（x)、translateY（y),translateZ（z)。

起始样式：

  <style>
    #father{
    
    
        width:300px;
        height: 300px;
        margin:100px auto;
        background-color: #0a6cd6;
    }
    #son{
    
    
        width: 200px;
        height: 200px;
        background-color: pink;
    }
  </style>
</head>
<body>
<div id="father">
  <div id="son">
    transform 3d
  </div>

</div>

起始样式图
向x,y,z轴各平移200px效果图：

其中translateZ能更好理解透视的位置。
在下面以translateZ为例来观察元素的3d变化：设置了父元素的perspctive为1000px:定义了视点离屏幕的距离。

 #father{
    
    
        width:300px;
        height: 300px;
        margin:100px auto;
        background-color: #0a6cd6;
        perspective: 1000px; //定义视点离屏幕的距离
    }
    #son{
    
    
        width: 200px;
        height: 200px;
        background-color: pink;
        transform: translateZ(100px);//向z轴平移100px
    }

向z轴平移100px效果图：

向z轴平移200px效果图：

向z轴平移400px效果图：

向z轴平移999px效果图:

向z轴平移1000px效果图:

在没有rotate元素的作用下，只有translateZ，它的作用让元素在我们眼前近或者远。
结论
1.设置的translateZ值越小，则子元素越小，因为元素离我们的视线远去了，看到的就变小了；设置的Translate Z值越大，则子元素也越大。
2.但是当接近父元素设置的1000px时，子元素的大小就会占满整个屏幕；
3.当translateZ的值等于或者大于1000px时，该元素就看不见了。

4.rotate3d(x,y,z,angle)

rotate3d(x,y,z,angle)定义3d旋转，对应着分别沿x，y，z轴进行3D旋转。其中x,y,z的值是一个0~1之间的数值，主要用来描述元素分别围绕x,y,z轴旋转的矢量值。
也可以是rotateX(x)，totateY(y)，rotateZ(z),其中x,y,z为angle角度。

ransform: perspective(1000px) rotate3d(0.5,0.5,0.5,30deg);

效果图：
在这里插入图片描述

（1）rotateX(angle)绕X轴3d旋转：
围绕x轴3d旋转正值30°：

transform: perspective(1000px) rotateX(30deg)；

围绕x轴3d旋转正值30°的效果图：（可以理解为：向里推）
围绕x轴3d旋转30°的效果：
围绕x轴3d旋转负值值30°：

transform: perspective(1000px) rotateX(-30deg)；

围绕x轴3d旋转负值30°的效果图：（可以理解为：向外拉）

(2)rotateY(angle)绕y轴3d旋转：
围绕y轴3d旋转正值30°：

transform: perspective(1000px) rotateY(30deg);

围绕y轴3d旋转正值30°的效果图：（可以理解为：侧拉）
围绕y轴3d旋转30°的效果图：

围绕y轴3d旋转负值的30°：

transform: perspective(1000px) rotateY(-30deg);

围绕y轴3d旋转负值的30°的效果图：（可以理解为：侧推）
在这里插入图片描述
(2)rotateZ(angle)绕z轴3d旋转：
围绕z轴3d旋转正值30°：

transform: perspective(1000px) rotateZ(30deg);

围绕z轴3d旋转正值30°的效果图：

围绕z轴3d旋转负值30°：

transform: perspective(1000px) rotateZ(-30deg);

围绕z轴3d旋转负值30°的效果图：

5.scale3d(x,y,z)

scale3d(x,y,z)，scaleX(x)，scaleY(y)，scaleZ(z)定义3D缩放转换
值>1时放大，值<1时缩小，值=1为默认值。

transform: perspective(1000px) scale3d(2,1.5,1.5);

效果图：

transform: perspective(1000px) scaleZ(2);

效果图：
在这里插入图片描述
单独的scaleZ(z)不会有任何效果，需要与其他的函数进行结合。

6.backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。其值有visible|hidden。
visible：背面是可见的。hidden：背面是不可见的。

7.transform-style属性

用于设置元素的子元素是位于 3D 空间中还是平面中.
参数：
1.flat:默认值，表示平面的
2.preserve-3d:表示3D透视

8.perspective-origin属性

设置 3D 元素的基点位置。定义时的perspective -Origin属性，它是一个元素的子元素，透视图，而不是元素本身。
语法格式：perspective-origin: x-axis y-axis;
默认值为：perspective-origin:50% 50%；
在这里插入图片描述