【Html】21 - transform-3D

transform-style

• 控制子元素是否处于3D立体环境

• • flat（默认值）2D模式
  • preserve-3d开启3D立体环境
  • 样式写在父级元素。

先来个大盒子包裹6个小盒子（做为正方体的6个面）

<!--样式写在父级元素。-->
<div class="box">
    <!--前面-->
    <div class="face front"></div>
   	<!--后面-->
    <div class="face back"></div>
    <!--左面-->
    <div class="face left"></div>
    <!--右面-->
    <div class="face right"></div>
    <!--上面-->
    <div class="face top"></div>
    <!--下面-->
    <div class="face bottom"></div>
</div>

给每一面加上样式

		.face {
            position: absolute;
            width: 200px;
            height: 200px;

            text-align: center;
            line-height: 200px;
            font-weight: 700;

            box-shadow: 0 0 5px #fff inset;
        }
		/*前面*/
        .front {
            transform: translateZ(100px);
        }
		/*后面*/
        .back {
            transform: rotateY(180deg) translateZ(100px);
        }
		/*左面*/
        .left {
            transform: rotateY(-90deg) translateZ(100px);
        }
		/*右面*/
        .right {
            transform: rotateY(90deg) translateZ(100px);
        }
		/*上面*/
        .top {
            transform: rotateX(90deg) translateZ(100px);
        }
		/*底面*/
        .bottom {
            transform: rotateX(-90deg) translateZ(100px);
        }

给父级盒子加上transform-style: preserve-3d;

.box {
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 200px;
            height: 200px;
			/*让box的子元素处于3D立体环境*/
            transform-style: preserve-3d;
    		/*让盒子旋转起来*/
            transition: all 2s;
            animation: box-rotate 5s linear infinite;
        }

perspective

• 3D元素距离视口的距离
• 样式加在父级样式中

此时我们给body元素加上

body {
            background-color: #292A2B;
    		/*让3D元素有近大圆小的样子*/
            perspective: 800px;
        }

---

有兴趣可以尝试下

---

END