JavaScript从常规CSS获取矩阵变换，并将matrix2D转换为matrix3D [英] JavaScript get matrix transform from regular CSS and convert matrix2D to matrix3D

问题描述

我需要从这样一个常规的CSS转换得到矩阵转换： rotateX（10deg）rotateZ（10deg）。

我知道有一个存在的解决方案WebKit（WebKitCSSMatrix），但没有像Firefox或IE ...

所以，我试过通过将变换设置为不可见（不在DOM中）并使用getComputedStyle获取该矩阵来获得矩阵，但如果元素隐藏或从文档中分离，则此方法不返回任何内容。

有很好的教程来将值转换为Matrix？

然后，如何将2D矩阵转换为3D？从6到16个值...

解决方案

本页说明如何将旋转描述为 2D矩阵：

比阅读关于如何手动设置矩阵： http://www.eleqtriq.com/2010/05/css-3d -matrix-transformations /

在这两种情况下，如果要应用多个转换，则必须乘以多个矩阵。有关如何执行此操作的信息可以在这里找到： http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

I need to get the matrix transform from a regular CSS transform like this one: rotateX(10deg) rotateZ(10deg).

I know there is an existring solution for WebKit (WebKitCSSMatrix) but there is nothing like that for Firefox or IE...

So, I tried to get the matrix by setting the transform to an invisible (not in the DOM) and getting it with getComputedStyle but this method return nothing if the element is hidden or detached from the document.

Is there a good tutorial to convert values to Matrix ?

Then, how to convert a 2D matrix to a 3D ? from 6 to 16 values...

解决方案

you can calculate the matrix yourself. this pages explains how to describe rotations as a 2D matrix: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Matrix.html

for a rotation this would be:

the matrix values can be accessed through these properties. the last row does not need to be modified for 2d. to initialize a matrix in css use: matrix(a,b,c,d,e,f)

for 3D matrices you can find a nice introduction here: http://www.eleqtriq.com/2010/05/understanding-css-3d-transforms/

than read about how to set up a matrix manually: http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

in both cases you will have to multiply several matrices if you want apply more than one transformation. information about how to do this can be found here: http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

这篇关于JavaScript从常规CSS获取矩阵变换，并将matrix2D转换为matrix3D的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！