先看效果图。
额，，，虽然这个效果图看着不咋地，但这是因为我的配色的原因，实际上配好色还是很好看的。。。
那么先说都用到了什么操作吧，首先是CSS3，然后。。额，好像没有然后了，我这里只用了CSS3(憋说还有HTML)。
那么先讲一下用到了CSS3中的哪些操作吧，首先呢，用到了透视，然后用到了3d，用到的3d中包括了x, y, z轴的旋转。
接下来讲一下具体的逻辑，因为我会一次性放上所有代码，所以我会一次性讲完所有逻辑。首先我们要弄出外边的正方体，一个正方体有6个面，我们要先做出来这6个面，其中通过旋转可以做出来4个面，分别是上下左右这4个面；通过Z轴操作可以做出来1个面，这个面是后面；剩下的一面是正面，有宽高就行。
之后我们要弄出里面的正方体，说是正方体，实际上这个正方体只有三个面分别是正面，右面和上面。实现这个正方体还是很简单的，只要外部正方体正面，右面和上面各弄出一个正方形，然后通过Z轴移动，拼在一起就行。
那么下面看代码:
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
main{
transform: perspective(900px) rotateX(-30deg) rotateY(-30deg);
transform-style: preserve-3d;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
main>div{
position: absolute;
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
main>div:nth-of-type(1)
{
border: 2px solid silver;
transform-origin: top;
transform: rotateX(-90deg);
transform-style: preserve-3d;
background: rgba(255, 165, 79, .4);
}
main>div:nth-of-type(1) div{
width: 100px;
height: 100px;
background: skyblue;
transform: translateZ(50px);
}
main>div:nth-of-type(2)
{
border: 2px solid silver;
transform-origin: right;
transform: rotateY(-90deg);
transform-style: preserve-3d;
background: rgba(139, 58, 58, .4);
}
main>div:nth-of-type(2) div{
background: pink;
width: 100px;
height: 100px;
transform: translateZ(50px);
}
main>div:nth-of-type(3)
{
border: 2px solid silver;
transform-style: preserve-3d;
background: rgba(255, 255, 0, .4);
}
main>div:nth-of-type(3) div{
height: 100px;
width: 100px;
background: teal;
transform: translateZ(-50px);
}
main>div:nth-of-type(4)
{
border: 2px solid silver;
transform-origin: left;
transform: rotateY(90deg);
background: rgba(127, 255, 212, .5);
}
main>div:nth-of-type(5)
{
border: 2px solid silver;
transform-origin: bottom;
transform: rotateX(90deg);
background: rgba(253, 245, 230, .8);
}
main>div:nth-of-type(6)
{
border: 2px solid silver;
transform: translateZ(-200px);
background: rgba(187, 255, 255, .5);
}
</style>
</head>
<body>
<main>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div></div>
<div></div>
<div></div>
</main>
</body>
</html>
|
可以看到有些盒子的Z轴偏移量是正数，有些是负数，这很正常，因为某些面旋转之后那个面相当于是反过来的，所以Z轴自然也就反过来了。
然后说一下为什么Z轴偏移量要选50px，这是因为外层盒子的宽高都是200px，200除以4等于50。那么为什么要除以4呢？这是因为如果把一个盒子分成4份，中间两份存放内容，最左和最右两份空白，可以实现居中效果。同理，这里Z轴偏移量设置为50px可以实现居中效果。
本篇完。
