transform rotatex、y、z的深刻理解

1、先上图

2、以x轴为例，y、z轴一样的道理，学习时关注三句话即可豁然开朗。。。

【

　　第一、x、y轴分别为标签中心线，z轴垂直标签中心点

　　第二、围绕x轴旋转时，转动x轴即可。【方向：让+x插向自己，旋转度数为正时-》顺时针】

　　第三、如果有多个参数(参数动作同时发生)，注意参数顺序。【

　　　　例1 ： { transform: rotateX(90deg)    translateZ(150px); }

　　　　　　围绕x轴旋转90度，同时向z轴方向移动150px的距离。

　　　　例 2 ： { transform: translateZ(150px)    rotateX(90deg) ; } 

　　　　　　向z轴方向移动150px，同时旋转90度【最终标签趟在Z轴上，标签中心点在z轴的150px处】

　　　　总结 ： 如果参数动作同时发生不容易理解的话，可以把动作分开来理解【先执行完后面的动作，再执行前面的动作】。

　　　　帮助理解 ： 第一个参数为主，第二个参数为辅助（即，第二个参数方向或参照线会随着动作而改变）。　　

　　　　　　为了便于理解可以先移动位置-》再进行旋转,例1可这样写【{transform: translateY(-150px)   rotateX(90deg) ;}】

　　】

】

 

转载于:https://www.cnblogs.com/L-G-Y/p/9952265.html