OLD | NEW |
1 <html> | 1 <html> |
2 <head> | 2 <head> |
3 <title>Point mapping through 3D transforms with origins</title> | 3 <title>Point mapping through 3D transforms with origins</title> |
4 <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8">
</script> | 4 <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8">
</script> |
5 | 5 |
6 <script type="text/javascript" charset="utf-8"> | 6 <script type="text/javascript" charset="utf-8"> |
7 | 7 |
8 function test() | 8 function test() |
9 { | 9 { |
10 // Scroll so that frame view offsets are non-zero | 10 // Scroll so that frame view offsets are non-zero |
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
68 | 68 |
69 .transformed { | 69 .transformed { |
70 position: relative; | 70 position: relative; |
71 height: 100px; | 71 height: 100px; |
72 width: 100px; | 72 width: 100px; |
73 padding: 20px; | 73 padding: 20px; |
74 margin: 20px; | 74 margin: 20px; |
75 border: 1px solid black; | 75 border: 1px solid black; |
76 background-color: #AAA; | 76 background-color: #AAA; |
77 -webkit-box-sizing: border-box; | 77 -webkit-box-sizing: border-box; |
78 -webkit-transform: translateZ(100px) rotateY(-40deg); | 78 transform: translateZ(100px) rotateY(-40deg); |
79 -webkit-transform-origin: 20% 40%; | 79 -webkit-transform-origin: 20% 40%; |
80 } | 80 } |
81 | 81 |
82 .layer { | 82 .layer { |
83 padding: 20px; | 83 padding: 20px; |
84 background-color: #C0D69E; | 84 background-color: #C0D69E; |
85 } | 85 } |
86 | 86 |
87 .inner { | 87 .inner { |
88 background-color: blue; | 88 background-color: blue; |
(...skipping 56 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
145 </div> | 145 </div> |
146 </div> | 146 </div> |
147 </div> | 147 </div> |
148 </div> | 148 </div> |
149 </div> | 149 </div> |
150 | 150 |
151 <div id="mousepos"></div> | 151 <div id="mousepos"></div> |
152 | 152 |
153 </body> | 153 </body> |
154 </html> | 154 </html> |
OLD | NEW |