1. 空間的変位
文法：
変換：translate3d(x, y, z);
変換:translateX(値);
変換:translateY(値);
変換:translateZ(值);
価値：
ピクセル単位値
パーセンテージ (ボックス自体のサイズに基づく)
2、視点
構文: パースペクティブ: 値; (親に追加)
値: ピクセル単位の値。値は通常 800px ～ 1200px (目から画面までの距離を表します)
機能: 空間が変換されると、要素に近大と遠小、近現実と遠仮想の視覚効果を追加します。
3. 空間回転
文法：
変換: 回転Z(値); Z軸を中心とした回転を示します
変換:rotateX(value); x 軸を中心とした回転を示します
変換:rotateY(value); y 軸を中心とした回転を示します
rotate3d(x, y, z, angle in度); めったに使用されません
回転角度が正か負かを判断する方法：左手で回転軸を持ち、親指を正の方向に向け、指を回転の正の方向に曲げます。
4、立体的なプレゼンテーション
構文:transform-style:preserve-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>Document</title>
<style>
.box1{
position: relative;
background-color: aqua;
margin: 0 auto;
transition: all 2s;
transform-style: preserve-3d;
}
div{
width: 300px;
height: 300px;
}
.font{
position: absolute;
background-color: blueviolet;
transform: translateZ(300px);
}
.after{
position: absolute;
background-color:cadetblue
}
.box1:hover{
transform: rotateY(-360deg);
}
</style>
</head>
<body>
<div class="box1">
<div class="font"></div>
<div class="after"></div>
</div>
</body>
</html>