OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 .container { | 3 .container { |
4 width: 200px; | 4 width: 200px; |
5 height: 200px; | 5 height: 200px; |
6 margin: 75px 0 0 75px; | 6 margin: 75px 0 0 75px; |
7 border: none; | 7 border: none; |
8 } | 8 } |
9 .cube { | 9 .cube { |
10 width: 100%; | 10 width: 100%; |
(...skipping 16 matching lines...) Expand all Loading... |
27 text-align: center; | 27 text-align: center; |
28 } | 28 } |
29 .front { | 29 .front { |
30 background: rgba(0, 0, 0, 0.3); | 30 background: rgba(0, 0, 0, 0.3); |
31 translate: 0 0 50px; | 31 translate: 0 0 50px; |
32 } | 32 } |
33 .back { | 33 .back { |
34 background: rgba(0, 255, 0, 1); | 34 background: rgba(0, 255, 0, 1); |
35 color: black; | 35 color: black; |
36 translate: 0 0 -50px; | 36 translate: 0 0 -50px; |
37 rotate: 180deg 0 1 0; | 37 rotate: 0 1 0 180deg; |
38 } | 38 } |
39 .right { | 39 .right { |
40 background: rgba(196, 0, 0, 0.7); | 40 background: rgba(196, 0, 0, 0.7); |
41 translate: 50px 0 0; | 41 translate: 50px 0 0; |
42 rotate: 90deg 0 1 0; | 42 rotate: 0 1 0 90deg; |
43 } | 43 } |
44 .left { | 44 .left { |
45 background: rgba(0, 0, 196, 0.7); | 45 background: rgba(0, 0, 196, 0.7); |
46 translate: -50px 0 0; | 46 translate: -50px 0 0; |
47 rotate: -90deg 0 1 0; | 47 rotate: 0 1 0 -90deg; |
48 } | 48 } |
49 .top { | 49 .top { |
50 background: rgba(196, 196, 0, 0.7); | 50 background: rgba(196, 196, 0, 0.7); |
51 translate: 0 -50px 0; | 51 translate: 0 -50px 0; |
52 rotate: 90deg 1 0 0; | 52 rotate: 1 0 0 90deg; |
53 } | 53 } |
54 .bottom { | 54 .bottom { |
55 background: rgba(196, 0, 196, 0.7); | 55 background: rgba(196, 0, 196, 0.7); |
56 translate: 0 50px 0; | 56 translate: 0 50px 0; |
57 rotate: -90deg 1 0 0; | 57 rotate: 1 0 0 -90deg; |
58 } | 58 } |
59 .scaleX { | 59 .scaleX { |
60 scale: 0.5 1.0 1.0; | 60 scale: 0.5 1.0 1.0; |
61 } | 61 } |
62 .scaleY { | 62 .scaleY { |
63 scale: 1.0 0.5 1.0; | 63 scale: 1.0 0.5 1.0; |
64 } | 64 } |
65 .scaleZ { | 65 .scaleZ { |
66 scale: 1.0 1.0 0.5; | 66 scale: 1.0 1.0 0.5; |
67 } | 67 } |
(...skipping 10 matching lines...) Expand all Loading... |
78 </div> | 78 </div> |
79 <div class="cube scaleX scaleZ"> | 79 <div class="cube scaleX scaleZ"> |
80 <div class="face front">1</div> | 80 <div class="face front">1</div> |
81 <div class="face back">2</div> | 81 <div class="face back">2</div> |
82 <div class="face right">3</div> | 82 <div class="face right">3</div> |
83 <div class="face left">4</div> | 83 <div class="face left">4</div> |
84 <div class="face top">5</div> | 84 <div class="face top">5</div> |
85 <div class="face bottom">6</div> | 85 <div class="face bottom">6</div> |
86 </div> | 86 </div> |
87 </div> | 87 </div> |
OLD | NEW |