CSS3透视变换后如何找到元素的2D屏幕点答案

【问题标题】：How can i find 2D screen point of an element after CSS3 perspective transformationCSS3透视变换后如何找到元素的2D屏幕点
【发布时间】：2013-09-05 06:57:42
【问题描述】：

我有一个 div 标签，其中包含一个使用“perspective(1000px) rotateX(45deg)”转换的子图像。有没有办法在浏览器完成转换后获取图像子的左上角位置？

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

是否可以使用 getComputedStyle()["transform"] matrix3D 值来转换 (10,10)，如果可以，如何？

提前致谢

--哈里

【问题讨论】：

标签： css

【解决方案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>

【讨论】：

透视变换后如何获得孩子的左上角位置？