css – rotate3d速记

前端之家收集整理的这篇文章主要介绍了css – rotate3d速记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何结合rotateX(50deg)rotateY(20deg)rotateZ(15deg)简写rotate3d()?

解决方法

rotateX(50deg)等价于rotate3d(1,50deg)

rotateY(20deg)相当于rotate3d(0,1,0,20deg)

rotateZ(15deg)等效于rotate3d(0,0,1,15deg)

所以…

rotateX(50deg)rotationY(20deg)rotateZ(15deg)

相当于

rotate3d(1,50deg)rotate3d(0,1,0,20deg)rotate3d(0,0,1,15deg)

对于一个通用的rotate3d(x,y,z,α),你有矩阵

哪里

现在,您可以为3个rotate3d变换中的每一个获取矩阵,并将它们相乘。并且结果矩阵是对应于所得到的单个rotate3d的矩阵。不知道如何轻松地提取rotate3d的值,但它确定很容易提取一个单一matrix3d的值。

在第一种情况下(rotateX(50deg)或rotate3d(1,50deg)),你有:

x = 1,y = 0,z = 0,α= 50deg

因此,在这种情况下矩阵的第一行是1 0 0 0。

第二个是0cos(50deg)-sin(50deg)0。

第三个0 sin(50deg)cos(50deg)0。

第四个显然是0 0 0 1。

在第二种情况下,你有x = 0,y = 1,z = 0,α= 20deg。

第一行:cos(20deg)0 sin(20deg)0。

第二行:0 1 0 0。

第三行:-sin(20)0 cos(20deg)0。

第四:0 0 0 1

在第三种情况下,你有x = 0,y = 0,z = 1,α= 15deg。

第一行:cos(15deg)-sin(15deg)0 0。

第二行sin(15deg)cos(15deg)0 0。

第三和第四行分别是0 0 1 0和0 0 0 1。

注意:您可能已经注意到,用于rotateY变换的sin值的符号不同于用于其他两个变换的sin值的符号。这不是计算错误。这样做的原因是,对于屏幕,你有y轴指向下,不向上。

因此,这些是需要乘以以获得4×4矩阵为所得单个rotate3d变换的三个4×4矩阵。正如我所说,我不知道如何容易得到4个值,但是4×4矩阵中的16个元素恰好是matrix3d等价于链接变换的16个参数。

编辑:

实际上,它很容易…你计算矩阵的矩阵的trace(对角线元素的总和)为rotate3d矩阵。

4-2 * 2 *(1-cos(α))/ 2 = 4-2 *(1-cos(α))= 2 2 * cos

然后,计算三个4×4矩阵的乘积的轨迹,将结果等同于提取α的2 2 * cos(α)。然后计算x,y,z。

在这种特殊情况下,如果我正确计算,从三个4×4矩阵的乘积产生的矩阵的轨迹将是:

T = 
cos(20deg)*cos(15deg) + 
cos(50deg)*cos(15deg) - sin(50deg)*sin(20deg)*cos(15deg) + 
cos(50deg)*cos(20deg) + 
1

因此cos(α)=(T-2)/ 2 = T / 2-1,这意味着α= acos(T / 2-1)。

原文链接:https://www.f2er.com/css/223602.html

猜你在找的CSS相关文章