老师，为什么要给每一个小div都加上translateZ(50px)

老师，为什么要给每一个小div都加上transform：translateZ(50px) ；才能实现呢

慕神8387157 2019-06-03

源自：CSS3转换 6-6 backface-visibility

38

收起

3回答

好帮手慕星星 2019-06-04 18:44:51

你好，tranform中旋转的时候轴是会跟着旋转的。但是z轴永远是对着div面的轴，所以移动的时候就是在z轴上设置。例如右侧right，根据Y轴旋转90度之后，z轴就是在右边，所以移动的还是z轴。

自己可以再理解下，祝学习愉快！

提问者慕神8387157 2019-06-04 11:55:27

老师，front和back沿着z轴平移可以理解，但是right和left这两个面不是应该沿着x轴平移吗，

还有top和bottom不是应该沿着y轴平移吗，可是为什么都是沿着z轴平移呢

好帮手慕星星 2019-06-04 11:49:41

你好，因为每个div元素的宽高为100px，如果只设置定位，每个div都是重叠的。

实现一个立体的正方体，例如前后部分，分别从当前位置向前向后移动宽度的一半，那么前后的距离就是一个div的宽度，这样左右两个侧面就可以放两个div元素了。所以需要通过移动z轴方形上的距离来控制元素的位置。

自己可以理解测试下，祝学习愉快！

相似问题

老师---

translatez(50px);

为什么要给导航最外层标题内容加两层div

关于cube

2-4问题，希望老师解释一下。我把banner的margin-top设置为50px不行吗？

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载