Chromium Code Reviews Chromium Code Reviews
Issue 1158603003:
CSS Independent Transform Properties (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <html> | |
| 3 | |
| 4 <head> | |
| 5 <style> | |
| 6 .pers250 { | |
| 7 perspective: 250px; | |
| 8 -webkit-perspective: 250px; | |
| 9 } | |
| 10 .pers350 { | |
| 11 perspective: 350px; | |
| 12 -webkit-perspective: 350px; | |
| 13 } | |
| 14 .pers500 { | |
| 15 perspective: 500px; | |
| 16 -webkit-perspective: 500px; | |
| 17 } | |
| 18 | |
| 19 .container { | |
| 20 width: 200px; | |
| 21 height: 200px; | |
| 22 margin: 75px 0 0 75px; | |
| 23 border: none; | |
| 24 } | |
| 25 | |
| 26 .cube { | |
| 27 width: 100%; | |
| 28 height: 100%; | |
| 29 backface-visibility: visible; | |
| 30 perspective-origin: 150% 150%; | |
| 31 transform-style: preserve-3d; | |
| 32 -webkit-backface-visibility: visible; | |
| 33 -webkit-perspective-origin: 150% 150%; | |
| 34 -webkit-transform-style: preserve-3d; | |
| 35 } | |
| 36 | |
| 37 .face { | |
| 38 display: block; | |
| 39 position: absolute; | |
| 40 width: 100px; | |
| 41 height: 100px; | |
| 42 border: none; | |
| 43 line-height: 100px; | |
| 44 font-family: sans-serif; | |
| 45 font-size: 60px; | |
| 46 color: white; | |
| 47 text-align: center; | |
| 48 } | |
| 49 | |
| 50 /* Define each face based on direction */ | |
| 51 .front { | |
| 52 background: rgba(0, 0, 0, 0.3); | |
| 53 transform: translateZ(50px); | |
|
Eric Willigers
2015/06/11 02:15:19
Where are the new transform properties being used?
| |
| 54 -webkit-transform: translateZ(50px); | |
| 55 } | |
| 56 .back { | |
| 57 background: rgba(0, 255, 0, 1); | |
| 58 color: black; | |
| 59 transform: rotateY(180deg) translateZ(50px); | |
| 60 -webkit-transform: rotateY(180deg) translateZ(50px); | |
| 61 } | |
| 62 .right { | |
| 63 background: rgba(196, 0, 0, 0.7); | |
| 64 transform: rotateY(90deg) translateZ(50px); | |
| 65 -webkit-transform: rotateY(90deg) translateZ(50px); | |
| 66 } | |
| 67 .left { | |
| 68 background: rgba(0, 0, 196, 0.7); | |
| 69 transform: rotateY(-90deg) translateZ(50px); | |
| 70 -webkit-transform: rotateY(-90deg) translateZ(50px); | |
| 71 } | |
| 72 .top { | |
| 73 background: rgba(196, 196, 0, 0.7); | |
| 74 transform: rotateX(90deg) translateZ(50px); | |
| 75 -webkit-transform: rotateX(90deg) translateZ(50px) | |
| 76 } | |
| 77 .bottom { | |
| 78 background: rgba(196, 0, 196, 0.7); | |
| 79 transform: rotateX(-90deg) translateZ(50px); | |
| 80 -webkit-transform: rotateX(-90deg) translateZ(50px); | |
| 81 } | |
| 82 | |
| 83 /* Make the table a little nicer */ | |
| 84 th, p, td { | |
| 85 background-color: #EEEEEE; | |
| 86 padding: 10px; | |
| 87 font-family: sans-serif; | |
| 88 text-align: left; | |
| 89 } | |
| 90 </style> | |
| 91 </head> | |
| 92 | |
| 93 <body> | |
| 94 <table> | |
| 95 <tbody> | |
| 96 <tr> | |
| 97 <th><code>perspective: 250px;</code> | |
| 98 </th> | |
| 99 <th><code>perspective: 350px;</code> | |
| 100 </th> | |
| 101 <th><code>perspective: 500px;</code> | |
| 102 </th> | |
| 103 </tr> | |
| 104 <tr> | |
| 105 <td> | |
| 106 <div class="container"> | |
| 107 <div class="cube pers250"> | |
| 108 <div class="face front">1</div> | |
| 109 <div class="face back">2</div> | |
| 110 <div class="face right">3</div> | |
| 111 <div class="face left">4</div> | |
| 112 <div class="face top">5</div> | |
| 113 <div class="face bottom">6</div> | |
| 114 </div> | |
| 115 </div> | |
| 116 </td> | |
| 117 <td> | |
| 118 <div class="container"> | |
| 119 <div class="cube pers350"> | |
| 120 <div class="face front">1</div> | |
| 121 <div class="face back">2</div> | |
| 122 <div class="face right">3</div> | |
| 123 <div class="face left">4</div> | |
| 124 <div class="face top">5</div> | |
| 125 <div class="face bottom">6</div> | |
| 126 </div> | |
| 127 </div> | |
| 128 </td> | |
| 129 <td> | |
| 130 <div class="container"> | |
| 131 <div class="cube pers500"> | |
| 132 <div class="face front">1</div> | |
| 133 <div class="face back">2</div> | |
| 134 <div class="face right">3</div> | |
| 135 <div class="face left">4</div> | |
| 136 <div class="face top">5</div> | |
| 137 <div class="face bottom">6</div> | |
| 138 </div> | |
| 139 </div> | |
| 140 </td> | |
| 141 </tr> | |
| 142 </tbody> | |
| 143 </table> | |
| 144 </div> | |
| 145 </body> | |
| 146 </html> | |
| OLD | NEW |
