极客观点
项目管理
HarmonyOS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
.scene {
width: 200px;
height: 200px;
margin: 0 auto;
perspective: 600px;
}
.cube {
width: 100%;
height: 100%;
transition: all 3s;
position: relative;
transform-style: preserve-3d;
transform-origin: center center -100px;
}
.cube:hover {
transform: rotateY(360deg);
}
.cube__face {
position: absolute;
width: 100%;
height: 100%;
line-height: 200px;
text-align: center;
background-color: aquamarine;
}
.cube__face_front {
z-index: 1;
}
.cube__face_right {
transform-origin: left;
transform: rotateY(90deg);
right: -200px;
}
.cube__face_back {
transform: translateZ(-200px) rotateY(180deg);
}
.cube__face_left {
transform-origin: right;
transform: rotateY(-90deg);
left: -200px;
}
.cube__face_top {
transform-origin: bottom;
transform: rotateX(90deg);
top: -200px;
}
.cube__face_bottom {
transform-origin: top;
transform: rotateX(-90deg);
bottom: -200px;
}
</style>
</head>
<body>
<div class="scene">
<div class="cube">
<div class="cube__face cube__face_front">front</div>
<div class="cube__face cube__face_back">back</div>
<div class="cube__face cube__face_right">right</div>
<div class="cube__face cube__face_left">left</div>
<div class="cube__face cube__face_top">top</div>
<div class="cube__face cube__face_bottom">bottom</div>
</div>
</div>
</body>
</html>如果perspective设置在. scene元素上一切正常，但是我把perspective转移到.cube上，就变成下面这个样子了
.scene {
width: 200px;
height: 200px;
margin: 0 auto;
}
.cube {
width: 100%;
height: 100%;
transition: all 3s;
position: relative;
transform-style: preserve-3d;
transform-origin: center center -100px;
perspective: 600px; //perspective属性从.scene移动到这里
}perspective直接设置在cube上和scene上有啥区别，为啥效果不同?
如果你是单纯想要做一个视角拉远的效果，同时不想让矩形旋转的时候变形，其实放在
.scene类上面才是正确的效果。如果你放到了了
.cube类上，那么 "视角Z轴" 距离就是在.cube元素上了。会使.cube元素的矩形形变。然后你在使用transform:rotateY()旋转的时候其实是在旋转形变之后的矩形，所以效果是这样的，并且我添加一个旋转角度之后的元素辅助你理解。相关阅读
perspective - CSS | MDN