CSS-肥宅快乐盒

本文最后更新于：2020年12月1日 下午

先来看看这个肥宅盒子的效果

怎么样，是不是很有意思呢？制作起来其实也不是很难的, 一步一步来

1.容器

1.1 定位容器

首先我们需要一个容器（wrap）来确定肥宅盒子在浏览器中的位置（为了节省空间已省略部分html）

灰色部分

1
2
3
4
5
6
7
8
9
<style>
.wrap{
    width: 100px;
    height: 100px;
    margin: 150px auto;
    background: gray;	/* 方便观察div位置 */
}
</style>
<div class="wrap"></div>

1.2 承载容器

在容器wrap里还需要加一个用于承载正方体的容器（cube）。打个比喻，有点像是器皿的底座这样子

绿色部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style>
.wrap{
    width: 100px;
    height: 100px;
    margin: 150px auto;
    position: relative;
    background: gray;
}
.cube{
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background:greenyellow;
    transform-style: preserve-3d; 
}
</style>
<div class="wrap">
    <div class="cube"></div>
</div>

好的，我们的底座已经完成了，是时候实现一个立体的小正方体了。

2.小正方体

2.1 引入图片

首先引入6张图片作为6个面（由于重叠，引入后暂时只能看到一张图片），并设定大小

效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<style>
/* 内部小正方体表面 */
.cube .in {
    display: block;
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50px;
    left: 50px;
}
/* 表面图片 */
.cube .in_pic {
    width: 100px;
    height: 100px;
}
</style>
<div class="wrap">
    <div class="cube">
        <span class="front_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/1.png" class="in_pic" />
        </span>
        <span class="back_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/2.png" class="in_pic" />
        </span>
        <span class="left_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/3.png" class="in_pic" />
        </span>
        <span class="right_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/4.png" class="in_pic" />
        </span>
        <span class="top_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/5.png" class="in_pic" />
        </span>
        <span class="bottom_in in">
            <img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/6.png" class="in_pic" />
        </span>     
    </div>
</div>

2.2 立体构建

接下来我们让每个面都旋转、移动到正确的位置。为每个面添加css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
/* 每个面都有自己的坐标轴XYZ，参考高考的几何题 */
.cube .front_in {
    /* 绕自身Y轴旋转0°, 再沿Z轴平移50px */
    transform: rotateY(0deg) translateZ(50px);
}
.cube .back_in {
    transform: rotateY(180deg) translateZ(50px);
}
.cube .left_in {
    /* 绕自身Y轴旋转90°，再沿Z轴平移50px */
    transform: rotateY(90deg) translateZ(50px) ;
}
.cube .right_in {
    transform: rotateY(-90deg) translateZ(50px);
}
.cube .top_in {
    /* 绕自身Y轴旋转90°，再沿Z轴平移 */
    transform: rotateX(90deg) translateZ(50px);
}
.cube .bottom_in {
    transform: rotateX(-90deg) translateZ(50px);
}
</style>

2.3 倾斜

由于我们是从正面看过去的，所以目前还是只能看到一个面，只需要给底座.cube添加一个倾斜角度就可以看到立体的正方体了

1
2
3
4
5
6
7
8
.cube{
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background:greenyellow;
    transform-style: preserve-3d; 
	transform: rotateX(45deg) rotateY(45deg); /* 倾斜角度 */
}

倾斜后的立体效果

3. 大正方体

3.1 立体样式+图片

搞出小正方体后，同理可实现外部的大正方体, 对应的css如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<style>
/* 外部正方体 */
.cube .out{
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.8;
    /* hover过渡时间 */
    transition: all 0.4s;
}
/* 外部正方体表面图片 */
.pic {
    width: 200px;
    height: 200px;
}
.cube .front_out {
    transform: rotateY(0deg) translateZ(100px);
}
.cube .back_out {
    transform: rotateY(180deg) translateZ(100px);
}
.cube .left_out {
    transform: rotateY(90deg) translateZ(100px);
}
.cube .right_out {
    transform: rotateY(-90deg) translateZ(100px);
}
.cube .top_out {
    transform: rotateX(90deg) translateZ(100px);
}
.cube .bottom_out {
    transform: rotateX(-90deg) translateZ(100px);
}
    
/* 鼠标悬浮(hover)时撑开各个面的效果 */
.cube:hover .front_out {
    transform: rotateY(0deg) translateZ(200px);
}
.cube:hover .back_out {
    transform: rotateY(180deg) translateZ(200px);
}
.cube:hover .left_out {
    transform: rotateY(90deg) translateZ(200px);
}
.cube:hover .right_out {
    transform: rotateY(-90deg) translateZ(200px);
}
.cube:hover .top_out {
    transform: rotateX(90deg) translateZ(200px);
}
.cube:hover .bottom_out {
    transform: rotateX(-90deg) translateZ(200px);
}    
</style>

引入外部表面6张图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- 外部正方体 -->
<span class="front_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0eef73838.jpg" class="pic" />
</span>
<span class="back_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0f2fb9a83.jpg" class="pic" />
</span>
<span class="left_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0f55411f0.jpg" class="pic" />
</span>
<span class="right_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0f79a1124.jpg" class="pic" />
</span>
<span class="top_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0f98a8b66.jpg" class="pic" />
</span>
<span class="bottom_out out">
    <img src="https://i.loli.net/2018/05/03/5aeb0fdd51b7e.jpg" class="pic" />
</span>

外部正方体

鼠标悬浮效果

到这里就已经大致完成了！最后还需要让这个正方体旋转起来，也很简单

3.2 自动旋转

在容器.cube中添加对应的css样式，如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 定义名为motion动画，绕X轴和Y轴旋转360° */
@keyframes motion {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
 }
.cube{
    width: 50px;
    height: 50px;
    margin: 0 auto;
    background:greenyellow;
    transform-style: preserve-3d; 
	transform: rotateX(45deg) rotateY(45deg); /* 倾斜角度 */
	animation: motion linear 20s infinite;	  /* 添加名为motion的动画,循环执行动画 */
}

4.完结撒花

最后的最后，把我们前面在容器.wrap和.cube添加的背景颜色去掉(即删掉下面两行)

1
2
background: gray;   	/* .wrap */
background: greenyellow;/* .cube */

ok，大功告成。平时并没有存图习惯，图片是临时在P站随便找的，可以自行更换自己喜欢的图片，效果更好（带背景色的图片观感更佳）

5.完整实例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            width: 100px;
            height: 100px;
            margin: 150px auto;
            position: relative;
        }
        .cube {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            transform-style: preserve-3d;
            transform: rotateX(45deg) rotateY(45deg);
            animation: motion linear 20s infinite;
            /* 添加名为motion的动画 */
        }
        @keyframes motion {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
        /* 内部小正方体 */
        .cube .in {
            display: block;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50px;
            left: 50px;
        }
        /* 小正方体表面图片 */
        .cube .in_pic {
            width: 100px;
            height: 100px;
        }
        .cube .front_in {
            transform: rotateY(0deg) translateZ(50px);
        }
        .cube .back_in {
            transform: rotateY(180deg) translateZ(50px);
        }
        .cube .left_in {
            transform: rotateY(90deg) translateZ(50px);
        }
        .cube .right_in {
            transform: rotateY(-90deg) translateZ(50px);
        }
        .cube .top_in {
            transform: rotateX(90deg) translateZ(50px);
        }
        .cube .bottom_in {
            transform: rotateX(-90deg) translateZ(50px);
        }

        /* 外部正方体 */
        .cube .out {
            display: block;
            position: absolute;
            width: 200px;
            height: 200px;
            opacity: 0.8;
            /* hover过渡时间 */
            transition: all 0.4s;
        }

        /* 外部正方体表面图片 */
        .pic {
            width: 200px;
            height: 200px;
        }
        .cube .front_out {
            transform: rotateY(0deg) translateZ(100px);
        }
        .cube .back_out {
            transform: rotateY(180deg) translateZ(100px);
        }
        .cube .left_out {
            transform: rotateY(90deg) translateZ(100px);
        }
        .cube .right_out {
            transform: rotateY(-90deg) translateZ(100px);
        }
        .cube .top_out {
            transform: rotateX(90deg) translateZ(100px);
        }
        .cube .bottom_out {
            transform: rotateX(-90deg) translateZ(100px);
        }
        /* 鼠标悬浮hover撑开 */
        .cube:hover .front_out {
            transform: rotateY(0deg) translateZ(200px);
        }
        .cube:hover .back_out {
            transform: rotateY(180deg) translateZ(200px);
        }
        .cube:hover .left_out {
            transform: rotateY(90deg) translateZ(200px);
        }
        .cube:hover .right_out {
            transform: rotateY(-90deg) translateZ(200px);
        }
        .cube:hover .top_out {
            transform: rotateX(90deg) translateZ(200px);
        }
        .cube:hover .bottom_out {
            transform: rotateX(-90deg) translateZ(200px);
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="cube">
            <!-- 内部正方体 -->
            <span class="front_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/1.png" class="in_pic" /></span>
            <span class="back_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/2.png" class="in_pic" /></span>
            <span class="left_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/3.png" class="in_pic" /></span>
            <span class="right_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/4.png" class="in_pic" /></span>
            <span class="top_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/5.png" class="in_pic" /></span>
            <span class="bottom_in in"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/6.png" class="in_pic" /></span>
            
            <!-- 外部正方体 -->
            <span class="front_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/1.png" class="pic" /></span>
            <span class="back_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/2.png" class="pic" /></span>
            <span class="left_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/3.png" class="pic" /></span>
            <span class="right_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/4.png" class="pic" /></span>
            <span class="top_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/5.png" class="pic" /></span>
            <span class="bottom_out out"><img src="https://cdn.jsdelivr.net/gh/LitStronger/[email protected]/post/cssBox/6.png" class="pic" /></span>
        </div>
    </div>
</body>
</html>

参考文章: https://cloud.tencent.com/developer/article/1584279

前端 css
css

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！