OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 div { | 3 div { |
4 width: 100px; | 4 width: 100px; |
5 height: 100px; | 5 height: 100px; |
6 background-color: blue; | 6 background-color: blue; |
7 transform-origin: 50% 50%; | 7 transform-origin: 50% 50%; |
8 } | 8 } |
9 .container { | 9 .container { |
10 rotate: 45deg; | 10 rotate: 45deg; |
11 background-color: red; | 11 background-color: red; |
12 perspective-origin: 150% 150%; | 12 perspective-origin: 150% 150%; |
13 perspective: 500px; | 13 perspective: 500px; |
14 } | 14 } |
15 #box1 { | 15 #box1 { |
16 rotate: inherit; | 16 rotate: inherit; |
17 } | 17 } |
18 #box2 { | 18 #box2 { |
19 transform: translate(200px); | 19 transform: translate(200px); |
20 rotate: 50deg 1 0 0; | 20 rotate: 1 0 0 50deg; |
21 } | 21 } |
22 #box3 { | 22 #box3 { |
23 transform: translate(200px); | 23 transform: translate(200px); |
24 rotate: 30deg 1 -2.5 4; | 24 rotate: 1 -2.5 4 30deg; |
25 } | 25 } |
26 #box4 { | 26 #box4 { |
27 rotate: 45deg 0 0 0; | 27 rotate: 0 0 0 45deg; |
28 } | 28 } |
29 </style> | 29 </style> |
30 | 30 |
31 <div class="container"> | 31 <div class="container"> |
32 <div id="box1">1</div> | 32 <div id="box1">1</div> |
33 <div id="box2">2</div> | 33 <div id="box2">2</div> |
34 </div> | 34 </div> |
35 <div id="box3">3</div> | 35 <div id="box3">3</div> |
36 <div id="box4">4</div> | 36 <div id="box4">4</div> |
OLD | NEW |