CSS练习题——2.三维正方体

1.需求：

2.步骤详解：

2.1.布局

布局是最外层div（控制里面的属性）包括6个div

    <div class="box">
        <div class="front"></div>
        <div class="left"></div>
        <div class="back"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>

现在是6个div重合在同一个面上，我们只需要调节各个面的位置，进行平移旋转就可以得到需求了。

2.2. 分别对样式调节

这6个div代表正方体的6个面，只需要写出来3个面，另外3个面的样式取反就可以了，例如左右面

    .left{
        background:blue;
        transform: translateX(-100px) rotateY(90deg);
    }
    .right{
        background:orange;
        transform: translateX(100px) rotateY(-90deg);        
    }

让左边的面left向左平移100px，然后围绕y轴旋转90度就能得到需求，然后right面取反，就能得到右面。剩下的4个面是同理。

3.改变视角（不是必须）

        /*改变观察者距离正方体的距离*/
        perspective:676px;
        /*控制观察者在正方体上下左右的视角*/
        perspective-origin:-149px 74px;

这里对box加一个样式，可以在chrome控制台里方便地对正方体进行360°的观察。

4.完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style type="text/css">
    .box {
        width: 200px;
        height: 200px;
        margin: 100px auto;
        position: relative;
        /*让box旋转30度，方便观察设计*/
        transform: rotate3d(1,1,0,-30deg);
        /*保留旋转之后的样式*/
        transform-style: preserve-3d;
        /*改变观察者距离正方体的距离*/
        perspective:676px;
        /*控制观察者在正方体上下左右的视角*/
        perspective-origin:-149px 74px;
    }

    /*box下的通用div样式*/
    .box>div {
        width: 100%;
        height: 100%;
        position: absolute;
    }

    .front {
        background: rgb(111,111,111,0.1);
        /*前移100px*/
        transform: translateZ(100px);
    }

    .back {
        background: green;
        transform: translateZ(-100px);
    }
    .left{
        background:blue;
        transform: translateX(-100px) rotateY(90deg);
    }
    .right{
        background:orange;
        transform: translateX(100px) rotateY(-90deg);        
    }
    .top{
        background: purple;
        transform:rotateX(-90deg) translateZ(-100px);
    }
    .bottom{
        background: #8d1025;
        transform:rotateX(-90deg) translateZ(100px);
    }
    </style>
</head>

<body>
    <div class="box">
        <div class="front"></div>
        <div class="left"></div>
        <div class="back"></div>
        <div class="right"></div>
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>

</html>

CSS练习题——2.三维正方体

1.需求：

2.步骤详解：

3.改变视角（不是必须）

4.完整代码

猜你喜欢