| [email protected] | 299a341 | 2014-04-14 18:31:37 | [diff] [blame] | 1 | <!DOCTYPE HTML> |
| 2 | <style> |
| 3 | .transformableContainer { |
| 4 | position: absolute; |
| 5 | -webkit-perspective-origin: 50% 50%; |
| 6 | -webkit-perspective: 100; |
| 7 | } |
| 8 | .transformable { |
| 9 | -webkit-transform-origin: 0em 0em 0em; |
| 10 | -webkit-transform-style: preserve-3d; |
| 11 | } |
| 12 | .transformed { |
| [email protected] | 8448b5ae | 2014-10-18 08:49:38 | [diff] [blame] | 13 | transform: translate3d(100px, 100px, -25px); |
| [email protected] | 299a341 | 2014-04-14 18:31:37 | [diff] [blame] | 14 | } |
| 15 | .resetTransformOrigin { |
| 16 | -webkit-transform-origin: 50% 50% !important; |
| 17 | } |
| 18 | </style> |
| 19 | <div class="transformableContainer resetTransformOrigin" style="width: 400px; height: 400px;"> |
| 20 | <div class="transformable transformed"> |
| 21 | <div class="content" style="width: 200px; height: 200px; background-color: red;"></div> |
| 22 | </div> |
| 23 | </div> |
| 24 | |
| 25 | <div class="transformableContainer resetTransformOrigin" style="width: 400px; height: 400px;"> |
| 26 | <div class="transformable transformed"> |
| 27 | <div class="content" style="width: 200px; height: 200px; background-color: green;"></div> |
| 28 | </div> |
| 29 | </div> |
