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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>立方体</title>
</head>
<style>
*{
padding: 0;margin: 0;
}
#cube{
width: 300px;height: 300px;
font-size: 80px; text-align: center;line-height: 300px;
transition: 2s;
transform: rotateY(-30deg) rotateX(-35deg);
transform-style: preserve-3d;
margin: 300px auto;
}
#cube:hover{
transform: rotateY(30deg) rotateX(35deg);
}
#cube > div{
width: 300px;height: 300px;position: absolute ;left: 0;top: 0;
transition: 2s;opacity: 0.5;
border: 1px dashed black;
}
#cube .flat1{
background-color:red; transform: translateY(-150px) rotateX(90deg);
}
#cube .flat2{
background-color:orange;transform: translateY(150px) rotateX(90deg);
}
#cube .flat3{
background-color:yellow;transform: translateX(-150px) rotateY(90deg);
}
#cube .flat4{
background-color:green;transform: translateX(150px) rotateY(90deg);
}
#cube .flat5{
background-color:lightgreen;transform: translateZ(150px) ;
}
#cube .flat6{
background-color:blue;transform: translateZ(-150px);
}
</style>
<body>
<div id="cube">
<div class="flat1">上</div>
<div class="flat2">下</div>
<div class="flat3">左</div>
<div class="flat4">右</div>
<div class="flat5">前</div>
<div class="flat6">后</div>
</div>
</body>
</html>
|
