老师，你在课上讲空间移动translateX要添加在3D旋转之后吗，为什么这里可以呢
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2-3</title>
<style type="text/css">
/* 此处写代码*/
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 200px;
background-color: red;
margin-top: 50px;
margin-left: 50px;
/*因为不是3D旋转rotatex、rotateY、rotateZ所以不用设置perspective属性 */
/* perspective: 100px; */
}
.spc {
position: relative;
width: 0px;
height: 0;
border: 18px solid transparent;
border-top: 9px solid yellow;
transform: rotate(0deg);
}
.spc::after {
content: "";
position: absolute;
top: -21px;
left: -6px;
width: 0;
height: 0;
border: 18px solid transparent;
border-left: 10px solid yellow;
transform: rotate(16deg);
}
.spc::before {
content: "";
position: absolute;
top: -21px;
left: -22px;
width: 0;
height: 0;
border: 18px solid transparent;
border-right: 10px solid yellow;
transform: rotate(342deg);
}
.spc:nth-child(1)
{
transform: scale(1) translate(10px,50px);
}
.spc:nth-child(2){
transform: scale(0.5) rotate(20deg) translateX(80px) translateY(-50px);
}
.spc:nth-child(3){
transform: scale(0.5) rotate(-30deg) translateX(130px) translateY(40px);
}
.spc:nth-child(4){
transform: scale(0.5) translateX(130px) translateY(-35px);
}
.spc:nth-child(5){
transform: scale(0.5) rotate(30deg) translateX(50px) translateY(-90px);
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="box">
<div class="spc"></div>
<div class="spc"></div>
<div class="spc"></div>
<div class="spc"></div>
<div class="spc"></div>
</div>
</body>
</html>
正在回答
同学你好，并不是说只能在3D旋转之后才可以使用空间移动，视频中老师讲解的，是因为要实现正方体的不同面，而3D旋转后会改变坐标轴方向，所以为了更好理解与计算，所以老师推荐同学先旋转，然后再平移。实际开发中，先移动还是还旋转都是可以的，根据实际要实现的效果灵活应用所学知识就可以了。
代码中存在的问题解答如下：
1、整体水平居中，效果会更好，建议：添加margin: 50px auto;属性实现水平居中。
2、样式相同的代码可以使用组合选择器书写在一起，简化代码书写，示例：
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星