css - How can i find 2D screen point of an element after CSS3 perspective transformation

Question

I have a div tag contain an image child which is transformed using "perspective(1000px) rotateX(45deg)". Is there a way to get the top, left position of the image child after transformation done by the browser?

<div id="parent">
   <div id="child" style="transform: perspective(1000px) rotateX(45deg)">
   <img src="<path>" style="position:absolute; top:10px;left:10px"/>
 </div>
</div>

Is it possible to use getComputedStyle()["transform"] matrix3D values to transform (10,10), if so how?

Thanks in advance

--Hari

Answer 1

试试这个代码。

<div style="-webkit-perspective: 800; perspective: 800; margin: 50px 0 50px 50px">
    <iframe src="http://www.abmuku.com/wp-content/uploads/2012/04/google-logo-small.jpg" style="-webkit-transform: rotate3d(0, 1, 1, 30deg); transform: rotate3d(0, 1, 1, 30deg); border:0;"></iframe>
</div>