3D変形（CSS）変換
2D XY
3D XYZ
3DでCSS3 3D座標系との座標系は、X軸は、図のように、180度回転される程度に相当する一定の差を超えています。
それらの座標を覚えてシンプル：
xは、右が正、左にマイナスであります
上記が負のY、以下が正
zが負の内部で、外側が正であります
回転X（）
Xは、パースペクティブに回転させます。
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}回転Y（）
沿ってY軸を回転させます
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}回転Z（）？
z軸に沿って回転
img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}パースペクティブ（遠近）
図2Dは、フラットコンピュータ画面であり、画像が立体（3D効果）を有する理由は、このオブジェクトが斜視図によって達成することができる、唯一のビジュアルプレゼンテーションです。
2D平面は、3D効果をレンダリングする、変換の過程で、斜視図であってもよいです。
- 視点原理：はるかに小さい近いです。
- ブラウザの視点：画面の視点をはるかに小さいすべての画像に近いです。
- 遠近：地平線、それはスクリーンの観点から長さを表します。視点、視点目の位置の影響をシミュレートするために使用
注：遠近効果は、いずれの場合にも必要とされない開発のニーズに応じて設定します。
親要素に設定され、一般的な視点属性として、子要素はすべて3D変換に作用します
移動X（X）
だけ水平移動方向**（X軸）
モバイルのための効果の主な目的
移動Y（Y）
垂直方向（Y軸移動）にのみ移動
translateZ（Z）
視覚表現transformZは本質的に、変更の大きさで、視点での距離の変化にXY平面の相対的な（近くと遠くには確かに参照が斜視財産である遠近参照、から来て何を言うだろう）。例えば、視点200pxのを設定し、その後、200に近いの隣transformZ値を、つまり、より近く、より大きな見え、200以上は表示されません、同等のは頭の後ろに行ってきましたので、私は通常、あなたを信じて、あなたは頭の背中を見ることはできません。
translate3d（X、Y、Z）
[注]、xおよびyは長さの値であってもよく、またはパーセンテージとして、高さと幅の比率と、それ自身の要素の水平方向に対して垂直方向であり、長さの値は、Zを設定することができます
オープンケース
body {
}
.door {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid gray;
perspective: 1000px;
background: url('images/dog.gif') no-repeat cover;
position: relative;
}
.door > div {
box-sizing: border-box;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
height: 100%;
background-color: brown;
transform-origin: left center;
transition: 1s;
position: relative;
}
.left::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
right: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.right {
width: 50%;
height: 100%;
float: left;
background-color: brown;
transform-origin: right center;
transition: 1s;
position: relative;
}
.right::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
left: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.door:hover .left {
transform: rotateY(-130deg);
}
.door:hover .right {
transform: rotateY(130deg);
}背面視認性
背面 - 可視属性は、画面が配向されていない場合に要素が表示されるかどうかを定義します。
ボックスケースフリップ
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /* 不是正面对象屏幕，就隐藏 */
}
div:hover img {
transform: rotateY(180deg);
}