純粋なCSSは3 D回転のキューブをします
32948 ワード
昨日偶然にネットユーザー(简単に言えばCSSで1つのキューブの回転の効果をします)のした1つの3 D回転のキューブの効果を见て、このブログの右侧の公告栏の示すことです
ここでやり方を見せて
興味のある方は自分なりのルービックキューブを作ってみてください
次は効果図です
難点:
cssアニメーションhttp://www.runoob.com/css3/css3-animations.html
以下から抜粋:http://m.blog.csdn.net/FE_dev/article/details/75142505
2017-11-30 08:26:45
転載先:https://www.cnblogs.com/angelye/p/7927307.html
ここでやり方を見せて
興味のある方は自分なりのルービックキューブを作ってみてください
1 DOCTYPE html>
2 <html>
3
4 <head>
5 <meta charset="utf-8" />
6 <style>
7 /* */
8 .wrap {
9 width: 200px;
10 height: 200px;
11 margin: 200px;
12 position: relative;
13 }
14
15 /* */
16 .cube {
17 width: 200px;
18 height: 200px;
19 margin: 0 auto;
20 transform-style: preserve-3d;
21 transform: rotateX(-30deg) rotateY(-80deg);
22 animation: rotate linear 20s infinite;
23 }
24
25 @-webkit-keyframes rotate {
26 from {
27 transform: rotateX(0deg) rotateY(0deg);
28 }
29 to {
30 transform: rotateX(360deg) rotateY(360deg);
31 }
32 }
33
34 .cube div {
35 position: absolute;
36 width: 200px;
37 height: 200px;
38 opacity: 0.8;
39 transition: all .4s;
40 }
41
42 /* */
43 .pic {
44 width: 200px;
45 height: 200px;
46 }
47
48 .cube .out_front {
49 transform: rotateY(0deg) translateZ(100px);
50 }
51
52 .cube .out_back {
53 transform: translateZ(-100px) rotateY(180deg);
54 }
55
56 .cube .out_left {
57 transform: rotateY(-90deg) translateZ(100px);
58 }
59
60 .cube .out_right {
61 transform: rotateY(90deg) translateZ(100px);
62 }
63
64 .cube .out_top {
65 transform: rotateX(90deg) translateZ(100px);
66 }
67
68 .cube .out_bottom {
69 transform: rotateX(-90deg) translateZ(100px);
70 }
71
72 /* */
73 .cube span {
74 display: block;
75 width: 100px;
76 height: 100px;
77 position: absolute;
78 top: 50px;
79 left: 50px;
80 }
81
82 .cube .in_pic {
83 width: 100px;
84 height: 100px;
85 }
86
87 .cube .in_front {
88 transform: rotateY(0deg) translateZ(50px);
89 }
90
91 .cube .in_back {
92 transform: translateZ(-50px) rotateY(180deg);
93 }
94
95 .cube .in_left {
96 transform: rotateY(-90deg) translateZ(50px);
97 }
98
99 .cube .in_right {
100 transform: rotateY(90deg) translateZ(50px);
101 }
102
103 .cube .in_top {
104 transform: rotateX(90deg) translateZ(50px);
105 }
106
107 .cube .in_bottom {
108 transform: rotateX(-90deg) translateZ(50px);
109 }
110
111 /* */
112 .cube:hover .out_front {
113 transform: rotateY(0deg) translateZ(200px);
114 }
115
116 .cube:hover .out_back {
117 transform: translateZ(-200px) rotateY(180deg);
118 }
119
120 .cube:hover .out_left {
121 transform: rotateY(-90deg) translateZ(200px);
122 }
123
124 .cube:hover .out_right {
125 transform: rotateY(90deg) translateZ(200px);
126 }
127
128 .cube:hover .out_top {
129 transform: rotateX(90deg) translateZ(200px);
130 }
131
132 .cube:hover .out_bottom {
133 transform: rotateX(-90deg) translateZ(200px);
134 }
135 style>
136 head>
137
138 <body>
139
140 <div class="wrap">
141
142 <div class="cube">
143
144 <div class="out_front">
145 <img src="https://img-blog.csdn.net/20170716094246620" class="pic" />
146 div>
147
148 <div class="out_back">
149 <img src="https://img-blog.csdn.net/20170716094334594" class="pic" />
150 div>
151
152 <div class="out_left">
153 <img src="https://img-blog.csdn.net/20170716094400013" class="pic" />
154 div>
155
156 <div class="out_right">
157 <img src="https://img-blog.csdn.net/20170716094422331" class="pic" />
158 div>
159
160 <div class="out_top">
161 <img src="https://img-blog.csdn.net/20170716094444434" class="pic" />
162 div>
163
164 <div class="out_bottom">
165 <img src="https://img-blog.csdn.net/20170716094504432" class="pic" />
166 div>
167
168
169 <span class="in_front">
170 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
171 span>
172 <span class="in_back">
173 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
174 span>
175 <span class="in_left">
176 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
177 span>
178 <span class="in_right">
179 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
180 span>
181 <span class="in_top">
182 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
183 span>
184 <span class="in_bottom">
185 <img src="https://img-blog.csdn.net/20170716120759718" class="in_pic" />
186 span>
187 div>
188
189 div>
190 body>
191
192 html>次は効果図です
難点:
transform-style: preserve-3d;変換されたサブエレメントに3 D変換を保持させる:参照リンクhttp://www.runoob.com/cssref/css3-pr-transform-style.html cssアニメーションhttp://www.runoob.com/css3/css3-animations.html
以下から抜粋:http://m.blog.csdn.net/FE_dev/article/details/75142505
2017-11-30 08:26:45
転載先:https://www.cnblogs.com/angelye/p/7927307.html