CSS3特效——六⾯体 1<!DOCTYPE html>
2<html>
3
4<head>
5<meta charset="UTF-8">
6<title></title>
7<style type="text/css">
8 #div{
9 width: 900px;
10 height: 900px;
11 border: 0px solid green;
12 }
13 #box {
3 d14 width: 1000px;
15 height: 1000px;
16 border: 0px solid green;
17 transform-style: preserve-3d;
18 position: absolute;
19 animation: spinCube 15s linear infinite alternate;
20 }
21
22
23 #box div {
24 width: 200px;
25 height: 200px;
26 position: absolute;
27 top: 600px;
28 left: 600px;
29 opacity: 0.7;
30 color: white;
31 text-align: center;
32 font-size: 150px;
33 font-weight: 600;
34 }
35
36 @keyframes spinCube {
37 0% {
38 transform: rotateX( 0deg) rotateY( 0deg);
39 }
40 100% {
41 transform: rotateX( 90deg) rotateY( 360deg);
42 }
43 }
44/*参考⾯正⾯*/
45
46 .d1 {
47 background: red;
48 }
49/*底部*/
50
51 .d2 {
52 transform: rotateX(90deg);
53 background: yellow;
54 transform-origin: bottom;
55 }
56/*顶部*/
57
58 .d3 {
59 transform: rotateX(90deg) translateY(-200px);
60 background: green;
61 transform-origin: top;
62 }
63/*左边*/
64
65 .d4 {
66 transform: rotateY(90deg);
67 background: blue;
68 transform-origin: left;
69 }
70/*右边*/
71
72 .d5 {
73 transform: rotateY(-90deg);
74 background: black;
75 transform-origin: right;
76 }
77/*背⾯*/
78
79 .d6 {
80 transform: translateZ(-200px);
81 background: gray;
82 }
83</style>
84</head>
85
86<body>
87<div id="div">
88<div id="box">
89<div class="d1">1</div> 90<div class="d2">2</div> 91<div class="d3">3</div> 92<div class="d4">4</div> 93<div class="d5">5</div> 94<div class="d6">6</div> 95</div>
96</div>
97</body>
98
99</html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论