perspective-origin-3-ref.html (827B)
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <style type="text/css"> 4 5 .parentWithPerspective { 6 perspective: 100px; 7 perspective-origin: 150px 150px; 8 -webkit-perspective: 100px; 9 -webkit-perspective-origin: 150px 150px; 10 /* Changing width/height to 500px should not change the rendering. */ 11 height:100%; 12 } 13 14 .parentWithPerspective > div { 15 position:absolute; 16 top:100px; 17 left:100px; 18 width:100px; 19 height:100px; 20 } 21 22 .notTransformed { 23 outline: 1px solid black; 24 } 25 26 .transformed { 27 background:blue; 28 transform-origin: 0% 0%; 29 transform: rotateY(45deg); 30 -webkit-transform-origin: 0% 0%; 31 -webkit-transform: rotateY(45deg); 32 } 33 34 </style> 35 <body> 36 <div class="parentWithPerspective"> 37 <div class="notTransformed"></div> 38 <div class="transformed"></div> 39 </div> 40 </body> 41 </html>