为什么3d旋转一定要添加到添加在3d移动后面，先旋转不也一样吗？例如以下正方体嵌套例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正方体嵌套案例</title>
<style>
*{
padding:0;
margin:0;
}
section{
width:1000px;
height:1000px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
section div.small-box{
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
perspective: 500;
transform-style:preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
}
section div.small-box div{
width:300px;
height:300px;
position:absolute;
top:0;
left:0;
}
section .small-box div:nth-child(1){
background:rgba(255, 0, 0,.5);
transform:translateY(-150px) rotateX(90deg);
}
section .small-box div:nth-child(2){
background:rgba(255, 165, 0,.5);
transform:translateY(150px) rotateX(-90deg);
}
section .small-box div:nth-child(3){
background:rgba(255, 255, 0,.5);
transform:translateX(150px) rotateY(90deg);
}
section .small-box div:nth-child(4){
background:rgba(0, 128, 0,.5);
transform:translateX(-150px) rotateY(-90deg);
}
section .small-box div:nth-child(5){
background:rgba(0, 255, 255,.5);
transform:translateZ(150px);
}
section .small-box div:nth-child(6){
background:rgba(0, 0, 255,.5);
transform:translateZ(-150px);
}
section div.big-box{
width:600px;
height:600px;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
perspective: 500;
transform-style:preserve-3d;
transform: rotateX(45deg) rotateY(45deg);
}
section div.big-box div{
width:600px;
height:600px;
position:absolute;
top:0;
left:0;
}
section .big-box div:nth-child(1){
background:rgba(255, 0, 0,.5);
transform:translateY(-300px) rotateX(90deg);
}
section .big-box div:nth-child(2){
background:rgba(255, 165, 0,.5);
transform:translateY(300px) rotateX(-90deg);
}
section .big-box div:nth-child(3){
background:rgba(255, 255, 0,.5);
transform:translateX(300px) rotateY(90deg);
}
section .big-box div:nth-child(4){
background:rgba(0, 128, 0,.5);
transform:translateX(-300px) rotateY(-90deg);
}
section .big-box div:nth-child(5){
background:rgba(0, 255, 255,.5);
transform:translateZ(300px);
}
section .big-box div:nth-child(6){
background:rgba(0, 0, 255,.5);
transform:translateZ(-300px);
}
section:hover .big-box div:nth-child(1){
transform:translateY(-600px) rotateX(90deg);
}
section:hover .big-box div:nth-child(2){
background:rgba(255, 165, 0,.5);
transform:translateY(600px) rotateX(-90deg);
}
section:hover .big-box div:nth-child(3){
background:rgba(255, 255, 0,.5);
transform:translateX(600px) rotateY(90deg);
}
section:hover .big-box div:nth-child(4){
background:rgba(0, 128, 0,.5);
transform:translateX(-600px) rotateY(-90deg);
}
section:hover .big-box div:nth-child(5){
background:rgba(0, 255, 255,.5);
transform:translateZ(600px);
}
section:hover .big-box div:nth-child(6){
background:rgba(0, 0, 255,.5);
transform:translateZ(-600px);
}
</style>
</head>
<body>
<section>
<div class="small-box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="big-box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</section>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，先移动后旋转、先旋转后移动都行，问题在于旋转会改变轴线方向，如果先旋转了，那么“再移动”时，会沿着新的轴线方向移动，比如下面的例子：
两个盒子outer1、outer2样式一模一样，outer1中的子元素是先平移后旋转，效果如下：
而outer2先旋转（此时x轴线会跟着转），再平移（会沿着新轴线），效果如下：
会发现，二者的最终效果有差异：
如果我们想要的效果是outer1、inner1那样，则inner2需要同时调整x、y方向的位移才行，例如：
调整inner2位置的过程中会发现，x、y方向位移的具体值，并不好确定（不好调）。因此，要具体问题具体分析，哪种方式利于实现最终的效果，就选用哪种。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星