| 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 |