3d实现立方体

3d： 俗称3d变换，指基于3d立体的角度来设置盒子。例如，将盒子设置为立方体。3d的效果跟2d是一样的，有平移和旋转，不同点在于，2d只有x轴和y轴，3d会多一个z轴，用于表示立体。3d的效果通过需要远距离观察才能看出立体效果，因为距离太近，我们只能看出平面的2d效果，这就需要在设置3d变换效果之前，

需要先设置 景深： css: perspective: 1200px; /* 在父元素中使用,设置景深 */

同时，我们还需要设置从屏幕的哪个点来观察屏幕内部的3d效果：
css: perspective-origin: 50% 50%;

对于3d的效果来讲，同样具有平移和旋转，但因为平移和旋转同样适用于2d效果，所以我们还需要告诉浏览器当前场景是在3d效果下进行的：

css: transform-style：preserve-3d;

/* 表示在3d空间中展示 */ 旋转: 旋转指让盒子绕着x轴或y轴进行旋转。

语法：css: transform: rotateX(旋转的角度); /* 绕着x轴旋转多少角度 */ transform: rotateY(旋转的角度); /* 绕着y轴旋转多少角度 */ transform: rotateZ(旋转的角度); /* 绕着z轴旋转多少角度 */

平移: 平移是让盒子在水平方向或垂直方向进行移动。

语法：css: transform: translateX(像素值); /* 水平方向移动，正值向右，负值向左 */ transform: translateY(像素值); /* 垂直方向移动，正值向下，负值向上 */ transform: translateZ(像素值); /*

z轴方向移动，正值距离眼睛更近，负值距离眼睛更远 */ transform: translate3d(水平方向像素值, 垂直方向像素值, z轴方向像素值); /* 复合写法 */

css样式代码：

.box{

            width: 300px;

            height: 300px;

            border: 1px solid #000;

            margin: 100px auto;

            position: relative;

            perspective: 1200px;

            perspective-origin: 50% 50%;

            transform-style: preserve-3d;

            transition: all 10s;

        }

        .box>div{

            width: 100px;

            height: 100px;

            position: absolute;

            font-size: 30px;

            line-height: 100px;

            text-align: center;

            opacity: 0.5;

           

        }

        .box div:nth-child(1){

            top: 0;

            left: 100px;

            background-color: #f00;

            transform: rotateX(-90deg);

            transform-origin: bottom;

        }

        .box div:nth-child(2){

            top: 100px;

            left: 0;

            background-color: orange;

            transform: rotateY(90deg);

            transform-origin: right;

        }

        .box div:nth-child(3){

            top: 100px;

            left: 100px;

            background-color: yellow;

        }

        .box div:nth-child(4){

            top: 100px;

            left: 100px;

            background-color: green;

            transform: translateZ(100px);

        }

        .box div:nth-child(5){

            top: 100px;

            left: 200px;

            background-color: blue;

            transform: rotateY(-90deg);

            transform-origin: left;

        }

        .box div:nth-child(6){

            top: 200px;

            left: 100px;

            background-color: #f0f;

            transform: rotateX(90deg);

            transform-origin: top;

        }

        .box:hover{

            transform: rotateX(360deg) rotateY(360deg);

        }

主体代码：

<div class="box">

        <div>1</div>

        <div>2</div>

        <div>3</div>

        <div>4</div>

        <div>5</div>

        <div>6</div>

    </div>

 

运动过程的效果：