如何在速记rotate3d()中组合rotateX(50deg) rotateY(20deg) rotateZ(15deg)

推荐答案

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

rotateY(20deg)等于rotate3d(0, 1, 0, 20deg)

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

所以...

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

相当于

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


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

通用旋转矩阵

哪里

解释


现在,你可以得到3rotate3d个变换的矩阵,然后将它们相乘.所得矩阵是对应于所得单个rotate3d的矩阵.不确定如何容易从中提取rotate3d的值,但提取单个matrix3d的值肯定很容易.


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

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

所以在本例中,矩阵的第一行是1 0 0 0.

第二个是0 cos(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 00 0 0 1.


Note: you may have noticed that the signs of the sin values for the rotateY transform are different than for the other two transforms. It's not a computation mistake. The reason for this is that, for the screen, you have the y-axis pointing down, not up.


这是三个4x4矩阵,您需要将它们相乘,才能得到得到的单个rotate3d变换的4x4矩阵.正如我已经说过的,我不确定取出这4个值有多容易,但是4x4矩阵中的16个元素正好是matrix3d个等价于链接转换的参数的16个参数.


EDIT:

实际上,事实证明这很容易……您可以计算rotate3d矩阵的矩阵的迹(对角线元素之和).

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

然后计算三个4x4矩阵乘积的轨迹,将结果与2 + 2*cos(α)相等,然后提取α.然后计算xyz.

在这种特殊情况下,如果我计算正确,由三个4x4矩阵的乘积得到的矩阵轨迹将是:

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).

Css相关问答推荐

本机CSS嵌套混乱

为什么align-content:start应用于单行项目?

弹性布局溢出时的换行符

CSS Select 器 $parent > $child Select 嵌套列表中的所有
  • 子元素
  • 在变量中存储匹配 Select 器的子元素的计数

    带有 flex 的 CSS 空 div 以扩展并保持纵横比

    使元素在顶部和中心都有粘性

    当父元素处于子元素 input 的焦点状态时更改父元素的样式

    semantic-ui-react 使输入使用全宽度可用

    在活动状态下更改按钮的外观

    老虎机插槽上的 CSS 对齐问题

    Twitter Bootstrap:进度条居中文本

    选中时从 HTML 文本输入中移除蓝色光晕

    css显示:表格不显示边框

    边界半径应该剪辑内容吗?

    通过 Bootstrap4 对列进行排序

    如何仅在一侧设置 CSS 边框?

    通过 JavaScript 更改 CSS 伪元素样式

    CSS 外边框

    在无序列表中的项目之后添加管道分隔符,除非该项目是最后一行