小白做立方体的艰辛历程

首先要先了解3D的坐标轴

其次了解 transform-style 和 perspective(length)两个属性。

transform-style: flat(默认，二维效果）/ preserve-3d(三维效果)；设置一个元素的transform-style: preserve-3d；只影响这个元素的子元素(如果孙元素也有3d效果，那么必须给子元素设置preserve-3d)。这样所有子元素都可以相对与父元素的平面进行3d变形操作。
perspective(length) 为一个元素设置三维透视的距离。仅作用于元素的后代，而不是其元素本身。当perspective: none/0时，相当于没有perspective(length)。比如你要建立一个小立方体，长宽高时200px。如果你的perspective<200px,那就相当于站在盒子里面看的结果，如果perspective非常大那就是站在非常远的地方看（立方体已经小正成了方形）。

当元素没有设置perpective(length)时，所有后代元素被压缩在同一个二维平面上，不存在景深的效果。如果设置 perspective(length)后，将会看到三维的效果。默认的透视视角中心在容器（是perspective所在的元素，不是他的后代元素）的中点，也就是perspective-origin: 50% 50%。当然你也可以自己设置，比如：左上角-webkit-perspective-origin: 0px 0px;

了解这两个属性之后，接下来开始做立方体：

一、首先先构想一个立方体。

二、上图中就是构想的以此为模版，来写html代码。

首先要构建一个父元素，这样才能利用transform-style: preserve-3d属性使子元素即就是六个盒子处于一个三维空间内。代码如下：

<div class="square">
        <div class="r1">up</div>
        <div class="r2">down</div>
        <div class="r3">left</div>
        <div class="r4">right</div>
        <div class="r5">middle</div>
        <div class="r6">after</div>
 </div>

三、然后开始写css代码：

  .square{
            width: 200px;
            height: 200px;
            position: relative;
            left: 50%;
            top: 100px;
            margin-left: -100px;
            transform-style: preserve-3d;
            transform: rotateY(-30deg) rotateX(57deg);
        }

正如上图代码一样，先设置父元素，居中只是个人习惯，可要可不要。其余不可省略。

四、然后给子元素的六个盒子设宽高以及透明度定位。

 .square div{
            width: 200px;
            height: 200px;
            opacity: 0.6;
            position: absolute;
        }

五、接下来就是利用移动，旋转等属性将六个面转移到该转移的位置。代码如下：

        .r1{
            background-color: cornflowerblue;
            transform:translateZ(100px);
        }
        .r2{
            background-color: rebeccapurple;
            transform: translateZ(-100px);
        }
        .r3{
            background-color: aqua;
            transform: rotateY(-90deg) translateZ(100px);
        }
        .r4{
            background-color: red;
            transform: rotateY(90deg) translateZ(100px);
            backface-visibility: hidden;
        }
        .r5{
            background-color: orange;
            transform: translateY(100px) rotateX(-90deg);
        }
        .r6{
            background-color: yellow;
            transform: rotateX(90deg) translateZ(100px) ;
        }

六、最后展示成果

作出立方体，经过短时间的研究，在原有的代码基础上让立方体可以转动。全部代码如下，由于是小白，作品有许多瑕疵，欢迎一起评价。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单立方体</title>
    <style type="text/css">

        .square{
            width: 200px;
            height: 200px;
            position: relative;
            left: 50%;
            top: 200px;
            margin-left: -100px;
            transform-style: preserve-3d;
            transform: rotateY(180deg) rotateX(90deg);
            animation: myself 5s linear infinite;

        }
        .square div{
            width: 200px;
            height: 200px;
            opacity: 0.6;
            position: absolute;
        }
        .r1{
            background-color: cornflowerblue;
            transform:translateZ(100px);
        }
        .r2{
            background-color: rebeccapurple;
            transform: translateZ(-100px);
        }
        .r3{
            background-color: aqua;
            transform: rotateY(-90deg) translateZ(100px);
        }
        .r4{
            background-color: red;
            transform: rotateY(90deg) translateZ(100px);
            backface-visibility: hidden;
        }
        .r5{
            background-color: orange;
            transform: translateY(100px) rotateX(-90deg);
        }
        .r6{
            background-color: yellow;
            transform: rotateX(90deg) translateZ(100px) ;
        }

        @keyframes myself {
            from{
                transform: rotate(0);
            }
        }
    </style>
</head>
<body>

    <div class="square">
        <div class="r1">up</div>
        <div class="r2">down</div>
        <div class="r3">left</div>
        <div class="r4">right</div>
        <div class="r5">middle</div>
        <div class="r6">after</div>
    </div>
</body>
</html>

文章开头有讲过perspective(lenght) 和 transform-style: flat / preserve-3d；接下来讲诉下这两个属性对于三维效果的重要性。

<1>、当设置perspective(length) ，不设置transform-style: preserve-3d；当元素静止时，会有立体的效果。

<2>、当设置perspective(length)；不设置transform-style：preserve-3d；当元素旋转时的效果：

<3>、当设置transform-style: preserve-3d，不设置perspective(length)，当元素静止时，不会有立体的效果：

<4>、当设置perspective(length)，不设置transform-style：preserve-3d；当元素旋转时的效果：

<5>、只有当两个属性都设置时，无论旋转或者静止都会有立体的效果。

小白做立方体的艰辛历程

了解这两个属性之后，接下来开始做立方体：

猜你喜欢