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小时内删除。