CSS中rotate3d(x,y,z,deg),只有三个值 它到底是如何确定旋转轴的？这个属性是个BUG？

html-css026

CSS中rotate3d(x,y,z,deg),只有三个值 它到底是如何确定旋转轴的？这个属性是个BUG？,第1张

x、y、z的取值并不是只有0和1（网上的好多资料都是以讹传讹的，容易被误导），而是可以为任意值（包括小数），其实它们就是x轴、y轴、z轴上的坐标值，三个值就可以唯一确定一个3D空间的点，然后从原点到这个点连接一条直线就是旋转轴，deg则是元素沿着这个旋转轴旋转的角度。这样很好理解啊，当然脑子里要有3D空间概念，好些东西是需要脑补的，毕竟显示器的屏幕在物理上只是一个2D平面。

1、css3做transform的时候保持旋转轴不变将旋转轴设置为正值。

2、当使用eulerAngles属性要设置旋转，重要的是要理解，提供了X、Y和Z旋转值来描述旋转。