1.遠近効果/被写界深度
左手の法則：親指は現在の軸の下方向を指し、指の方向は正の方向です
- perspective（length）は、要素の3D遠近距離を設定します。要素自体ではなく、要素の子孫にのみ影響します。パースペクティブの場合：なし/ 0 ;、パースペクティブ（長さ）を設定しないのと同じです。たとえば、小さな立方体を作成する場合、長さ、幅、高さはすべて200pxです。視点が200px未満の場合は、ボックス内に立って結果を見るのと同じです。視点が非常に大きい場合は、遠くに立っている（立方体が小さな正方形になっている）ことを意味します。つまり、perspective属性はオブザーバーを指定しますz = 0平面までの距離により、3次元の位置変換を持つ要素が遠近効果を生み出します
- perspective-origin属性は、平面上のレンズの位置を指定します。デフォルトは要素の中央に配置されます
- transform-style：変換された子要素が3D変換を保持するようにします（親要素で設定する必要があります）：
- transform-style：flat子要素は、その3D位置フラットモードを保持しません。
- transform-style：preserve-3d子要素は、3D位置、つまり立体的な方法を保持します。
2.立方体を作る
HTMLコード：
<body>
<div class="container">
<div class="front">前</div>
<div class="back">后</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="top">上</div>
<div class="bottom">下</div>
</div>
</body>
CSSコード：
<style>
.container {
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
/* 使被转换的子元素保留其 3D 转换(需要设置在父元素中)： */
transform-style: preserve-3d;
/* 给立方体添加旋转动画 */
animation: rotate 20s linear infinite;
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
50% {
transform: rotateX(-10deg) rotateY(-360deg);
}
60% {
transform: rotateX(-10deg) rotateY(-340deg);
}
100% {
transform: rotateX(-360deg) rotateY(-340deg);
}
}
.container>div {
width: 200px;
height: 200px;
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
}
.front {
background-color: red;
transform: translateZ(100px);
}
.back {
background-color: green;
transform: translateZ(-100px) rotateY(180deg);
}
.left {
background-color: purple;
transform: translateX(100px) rotateY(90deg);
}
.right {
background-color: pink;
transform: translateX(-100px) rotateY(-90deg);
}
.top {
background-color: orangered;
transform: translateY(-100px) rotateX(90deg);
}
.bottom {
background-color: yellowgreen;
transform: translateY(100px) rotateX(-90deg);
}
</style>