十、 3D

2d是平面

2d的坐标系： x + y
x: 正方向向右  
y: 正方向向下

3d是立体

3d的坐标系: x + y + z
x: 正方向向右
y: 正方向向下
z: 垂直于屏幕

10.1 translateZ

该属性是transform的一个子属性，表示元素沿着自身坐标系z轴移动多少像素

<div id="box">
    <img src="./碎片轮播图/imgs/0.jpg" alt="">
</div>

img {
    width: 400px;
    /* 图片在Z轴上移动的距离 */
    transform: translateZ(100px);
}

但是只有该条语句的时候， 将没有任何效果

要给父元素添加perspective: xxpx

表示，此时元素距离屏幕的距离

举例：

/* 父元素 */
#box {
    width: 400px;
    height: 300px;
    margin: 50px auto;
    border: 1px solid #000;
    background-color: red;
    /* 父元素里屏幕的距离1000px */
    perspective: 1000px;
}

/* 子元素 */
img {
    width: 400px;
    /* 表示子元素从距离屏幕1000px的位置移动到距离屏幕900px的位置 相当于放大图片 */
    transform: translateZ(100px);
}

所以，当只有一个translateZ属性的时候， 浏览器不知道该以什么样的形式变化
所以，必须给父元素添加perspective属性，使父元素和子元素之间有一个相对距离的比值

10.2 perspective

景深：

决定元素到屏幕的距离

举例：

 /* 父元素 */
#box {
    width: 400px;
    height: 400px;
    margin: 0 auto;
    border: 1px solid #000;
    background-color: red;
    /* 确定舞台的距离 */
    perspective: 1000px;
}

10.3 transform-style: perserve-3d

作用：

让子元素保留3d效果

<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>

#div1 {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    border: 1px solid #000;
}
#div2 {
    position: absolute;
    width: 200px;
    height: 250px;
    margin: 10px;
    background-color: red;
}
#div3 {
    position: absolute;
    width: 250px;
    height: 200px;
    margin: 10px;
    background-color: lightblue;
}

给div2添加 transform: rotateY(60deg);

给div3添加 transform: rotateX(-60deg);

#div2 {
    position: absolute;
    width: 200px;
    height: 250px;
    margin: 10px;
    background-color: red;
    transform: rotateY(60deg);
}
#div3 {
    position: absolute;
    width: 250px;
    height: 200px;
    margin: 10px;
    background-color: lightblue;
    transform: rotateX(-60deg);
}

给div2添加transform-style: preserve-3d;

#div2 {
    position: absolute;
    width: 200px;
    height: 250px;
    margin: 10px;
    background-color: red;
    transform: rotateY(60deg);
    transform-style: preserve-3d;
}

10.4 scaleZ

scale是缩放的意思，一个元素只有高度和宽度没有厚度的概念，所以给一个元素添加scaleZ是没有意义的

给一个具备立体样式容器元素添加scaleZ，将体现在该元素的子元素身上

举例：

接下来， 我们把该元素变为具备立体样式的容器元素：

<div>   
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

综合结论：

当给一个元素添加scaleZ是没有意义的， 只有当一个元素成为有立体样式的容器元素的时候，此时添加scaleZ，将体现在子元素身上

10.5 backface-visibility

默认情况下图片背面是可见状态

backface-visibility:visible; (默认值)

加上backface-visibility: hidden

图片的背面被隐藏

10.6 改变旋转轴中心

• transform-origin: 接受两个参数

  • 可以是单词法

  • 可以是像素法

  • 可以百分比

  • 默认是 50% 50%

改变旋转轴中心为左上角：

img {
    /*改变旋转中心为左上角*/
    transform-origin: left top;
    transform: rotateZ(45deg);
}

改变旋转轴中心到 50px 50px的位置：

img {
    /*transform-origin: 50px 50px;*/
    transform: rotateZ(45deg);
}

改变旋转轴中心到右侧中间部分：

img {
    /*改变旋转轴中心*/
    transform-origin: 100% 50%;
    transform: rotateZ(45deg);
}