空间转换

空间转换属性：transform，也叫3D转换。使用transform属性可以实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

空间位移

语法

• transform: translate3d(x, y, z);
• transform: translateX(值);
• transform: translateY(值);
• transform: translateZ(值);

取值

• 像素单位数值
• 百分比：参照自身宽高

<div class="box">perspective</div>

body {
            /* 视距：人的眼睛到屏幕的距离 一般在800px – 1200px */
            perspective: 500px;
        }
        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: #ccc;
            border: 1px solid #000;
            transition: all 1s;
        }

        .box:hover {
            /* translate: 百分比：参照自身宽高; 
            translateZ：百分比无反应，原因：盒子是平面图，无厚度可参考 
            */
            transform: translateX(100px);
            transform: translateY(100px);
            transform: translateZ(100px);
            transform: translate3d(100px, 100px, 100px);
        }

空间旋转

语法

• transform: rotateZ(值);

• transform: rotateX(值);

• transform: rotateY(值);

拓展:连写

• rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
• x，y，z 取值为0-1之间的数字

左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

<img src="./images/hero.jpeg" alt="">

body {
            /* 视距，使子元素具有3d转换效果 */
            perspective: 800px;
        }
        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            transform: rotateX(90deg);
            transform: rotateY(90deg);
             transform: rotateZ(90deg); 
        }

空间缩放

语法：

• transform: scaleX(倍数);
• transform: scaleY(倍数);
• transform: scaleZ(倍数);
• transform: scale3d(x, y, z);

<div class="box">
        <div class="father">
            <span>1</span>
            <span>2</span>
        </div>
  </div>

 .box {
            width: 300px;
            height: 300px;
            margin: 100px auto;
        }
        .father {
            position: relative;
            width: 100px;
            height: 100px;
            background-color: #ccc;
            transform-style: preserve-3d;
            transform: rotate3d(1, 1, 0, 50deg);
            transition: all 1s;
        }
        .father:hover {
            transform: rotate3d(1, 1, 0, 50deg) scale3d(1.2,1.2,1.2);
        }
        .father>span {
            position: absolute;
            display: block;
            width: 100px;
            height: 100px;
        }

        span:nth-child(1) {
            background-color: pink;
            transform: translateY(-50px) rotateX(90deg);
        }
        span:nth-child(2) {
            background-color: skyblue;
            transform: translateZ(50px);
        }

扩展

透视

Z轴是视线方向，移动效果应该是距离的远或近， 电脑屏幕是平面，默认无法观察远近效果，这时使用perspective属性实现近大远小、近清楚远模糊透视效果

语法

• perspective: 值;

需要添加给父级

取值：像素单位数值， 一般在800px – 1200px。

透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

左面的图：z>0,右边的图z<0

作用

空间转换时，为元素添加近大远小、近实远虚的视觉效果

立体呈现

perspective只增加近大远小、近实远虚的视觉效果。不能呈现立体图形。这时可以使用transform-style: preserve-3d呈现立体图形

呈现立体图形步骤

1. 盒子父元素添加transform-style: preserve-3d；使子元素处于真正的3d空间。(默认flat，子元素不处在真正的3d空间)

2. 按需求设置子盒子的位置（位移或旋转）

3. 父盒子设置空间旋转可看到透视效果

   注意：空间内，转换元素都有自已独立的坐标轴，互不干扰

   perspective与transform-style使用场景：

   • 一个标签需要透视，在父元素加视距：perspective
   • 多个盒子需要透视，在父元素添加transform-style: preserve-3d;使里面的子元素处在真正的3d空间

<div class="box">
        <div class="front"></div>
        <div class="back"></div>
    </div>

.box {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px auto;
            transform-style: preserve-3d;
            transition: all 1s; 
        }
        .box:hover {
            transform: rotateY(180deg); 
        }
        .box>div {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .front {
            background-color: orange;
            transform: translateZ(-300px);
        }

        .back {
            background-color: green;
        }