前端 - 请教一下CSS3中translateZ和rotateY书写顺序的问题
问题描述
<!DOCTYPE html><html><head><meta charset='utf-8'><title>translateZ测试</title><style>*{margin: 0; padding: 0;}/*父级p和子级p的样式*/.fa{width: 200px; height: 200px; border: 2px solid #000; margin: 100px auto; perspective: 800px;}.son{width: 100%; height: 100%; background: lime; font-size: 20px; text-align: center; -webkit-transform: translateZ(300px) rotateY(55deg);}</style></head><body> <p class='fa'><p class='son'>rotateY</p> </p> </body></html>
当先执行rotateY，后执行translateZ时，（-webkit-transform: translateZ(300px) rotateY(55deg);）截图：
当先执行translateZ，后执行rotateY时，（-webkit-transform: rotateY(55deg) translateZ(300px);）截图：
请问为什么translateZ和rotateY书写顺序不同，结果也不同，这其中的原理是什么呢？我看了《图解CSS3》，也百度了相关内容，但还是不知道为什么。请知道的朋友给讲讲，谢谢！
问题解答
回答1：这部分我前几天刚看，也是研究老半天，应该是z轴始终是与平面图形垂直的，先转换角度的话，z轴的方向也相应发生变化。
回答2：脑子里构建个XYZ轴或者画一个，然后拿手比划比划我觉得是最好最方便的理解方式
回答3：很简单:
向右转，向前走5步
和
向前走5步，向右转
到达的位置是不一样的
回答4：我理解的是:在没有做任何变换时 元素都是在translate3d三维的世界 x y z轴的原点,不管做任何变换 坐标系都不会变的,第一种情况是 先转55度 在沿着z平移到300px(类似于扭着身子向前走了300px); 而第二种情况是 先平移出来 然后在绕着坐标的Y轴旋转(类似于做半径是300的圆周运动)
相关文章：
1. javascript - react能够使用什么时间插件2. docker api 开发的端口怎么获取？3. node.js - 我是一个做前端的，求教如何学习vue，node等js引擎？4. 如何解决docker宿主机无法访问容器中的服务？5. PHP中的$this代表当前的类还是方法？6. android glide asbitmap 在baseadpter中的问题7. 老师，flex-shrink: 1; 按视频操作，不会自动缩放8. 如何解决Centos下Docker服务启动无响应，且输入docker命令无响应？9. java - 为什么第一个线程已经释放了锁，第二个线程却不行？10. sublime-text - sublime text 3中编译python（sublimeREPL），如何仅运行单行/选定部分
网公网安备