请教两个效果失败原因：rotateX|Y() 与 translateZ()
/* 效果失败原因：
1： rotateX|Y() 与 translateZ() 书写顺序 影响了元素位置
2： translateZ() 移动位置的值 是 50px
不知道为什么
*/
正在回答
同学你好！
（1）书写顺序就是会影响到元素的位置显示（决定于先旋转根据旋转后的轴位移，还是先位移再旋转）
（1）当前面和后面的都不做transform的时候，位置如下，在蓝线部分：
初始状态z轴是朝前方向，1沿着z轴（向前方向）移动了50px；2在旋转180deg之后，轴也是旋转了的，那么此时z轴就是朝后的，所以也（向后方向）移动50px。一共就是底部正方形的高度100px
比较绕，同学看着文字可以想象一下。
如果帮助到了你，欢迎采纳，祝学习愉快~
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>transform扩展属性transform-style</title>
<style type="text/css">
* {margin: 0;padding: 0;border: none;text-decoration: none;list-style: none;}
body {font: 22px/100% '微软雅黑';background-color: #abcedf;}
section.list-cube { background-color: #eee; }
section.list-cube > div.cube-box { width: 660px;height: 100px; margin: 100px auto;}
section.list-cube > div.cube-box > div { width: 100px;height: 100px;background-color: rgba(255,255,255,.1);box-shadow: 0 0 15px rgba(0,0,0,.5) inset;display: inline-block;text-align: center;font: 30px/100px '微软雅黑'; }
section.list-cube > div.cube-b1 > div { -webkit-backface-visibility: visible; backface-visibility: visible; }
section.list-cube > div.cube-b2 > div { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
section.list-cube > div.cube-box > div.cube-front { -webkit-transform: translateZ(50px);transform: translateZ(50px); }
section.list-cube > div.cube-box > div.cube-back { -webkit-transform: rotateY(180deg) translateZ(50px);transform: rotateY(180deg) translateZ(50px); }
/*section.list-cube > div.cube-box > div.cube-back { transform: translateZ(50px) rotateY(180deg); } */ /* 位置错误 */
/*section.list-cube > div.cube-box > div.cube-back { transform: rotateY(180deg) translateZ(0) ; } */ /* 位置错误 */
section.list-cube > div.cube-box > div.cube-right { -webkit-transform: rotateY(90deg) translateZ(50px);transform: rotateY(90deg) translateZ(50px); }
section.list-cube > div.cube-box > div.cube-left { -webkit-transform: rotateY(-90deg) translateZ(50px);transform: rotateY(-90deg) translateZ(50px); }
section.list-cube > div.cube-box > div.cube-top { -webkit-transform: rotateX(90deg) translateZ(50px);transform: rotateX(90deg) translateZ(50px); }
section.list-cube > div.cube-box > div.cube-bottom { -webkit-transform: rotateX(-90deg) translateZ(50px);transform: rotateX(-90deg) translateZ(50px); }
section.list-cube { -webkit-perspective: 800px;perspective: 800px; }
section.list-cube > div.cube-box > div { position: absolute; }
section.list-cube > div.cube-box { -webkit-transform-style: preserve-3d;transform-style: preserve-3d; }
/* 效果失败原因：
1： rotateX|Y() 与 translateZ() 书写顺序 影响了元素位置
2： translateZ() 移动位置的值 是 50px
不知道为什么
*/
</style>
</head>
<body>
<!-- 3D旋转 制作 正六边体--筛子 -->
<section class="list-cube">
<div class="cube-box cube-b1">
<div class="cube-front">1</div>
<div class="cube-right">3</div>
<div class="cube-left">4</div>
<div class="cube-top">5</div>
<div class="cube-bottom">6</div>
</div>
<div class="cube-box cube-b2">
<div class="cube-front">1</div>
<div class="cube-back">2</div>
<div class="cube-right">3</div>
<div class="cube-left">4</div>
<div class="cube-top">5</div>
<div class="cube-bottom">6</div>
</div>
</section>
</body>
</html>
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星