CSS3中的3D坐標系與上述的3D坐標系是有一定區(qū)別的壳贪，相當于其繞著X軸旋轉(zhuǎn)了180度见坑，如下圖
3D坐標系.png
簡單記住他們的坐標：
x左邊是負的菇肃，右邊是正的
y 上面是負的， 下面是正的
z 里面是負的酸些， 外面是正的
rotate
rotateX() : 就是沿著 x 立體旋轉(zhuǎn).
rotateY()：沿著y軸進行旋轉(zhuǎn)
rotateZ()?：沿著z軸進行旋轉(zhuǎn)
透視(perspective)
電腦顯示屏是一個2D平面宰译，圖像之所以具有立體感（3D效果），其實只是一種視覺呈現(xiàn)魄懂，通過透視可以實現(xiàn)此目的沿侈。
透視可以將一個2D平面，在轉(zhuǎn)換的過程當中市栗，呈現(xiàn)3D效果缀拭。
- 透視原理： 近大遠小 。
- 瀏覽器透視：把近大遠小的所有圖像填帽，透視在屏幕上蛛淋。
- perspective：視距，表示視點距離屏幕的長短篡腌。視點褐荷，用于模擬透視效果時人眼的位置
注：并非任何情況下需要透視效果，根據(jù)開發(fā)需要進行設(shè)置嘹悼。
perspective 一般作為一個屬性叛甫，設(shè)置給父元素层宫，作用于所有3D轉(zhuǎn)換的子元素
理解透視距離原理：
透視.png
移動translate
translate3d(x,y,z)
[注意]其中，x和y可以是長度值其监，也可以是百分比萌腿，百分比是相對于其本身元素水平方向的寬度和垂直方向的高度和；z只能設(shè)置長度值
開門案例
開門.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>開門大吉</title>
<style>
section {
width: 450px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
background: url(images/3.jpg) no-repeat;
position: relative;
perspective: 1000px; /*給父盒子增加透視*/
}
.door-left,.door-right {
position: absolute;
width: 50%;
height: 100%;
background-color: pink;
transition: all 1s; /*連個門都是過渡*/
}
.door-left {
left: 0;
border-right: 1px solid #000;
transform-origin:left; /*旋轉(zhuǎn)中心點*/
}
.door-right {
right: 0;
border-left: 1px solid #000;
transform-origin:right; /*旋轉(zhuǎn)中心點*/
}
.door-left::after,
.door-right::after {
content: "";
position: absolute;
top: 50%;
width: 10px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
transform: translateY(-50%); /*自己高度的一半*/
}
.door-left::after {
right: 5px;
}
.door-right::after {
left: 5px;
}
/* 鼠標經(jīng)過section棠赛，兩個門進行翻轉(zhuǎn) */
section:hover .door-right {
transform: rotateY(130deg);
}
section:hover .door-left {
transform: rotateY(-130deg);
}
</style>
</head>
<body>
<section>
<div class="door-left"></div>
<div class="door-right"></div>
</section>
</body>
</html>
backface-visibility
兩面翻轉(zhuǎn)的盒子
翻轉(zhuǎn).gif
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
/*transform-style: preserve-3d;*/
/* 1.保留當前空間位置
2.是圖片扁平化*/
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 8s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /*不是正面對向屏幕哮奇，就隱藏*/
}
div:hover img {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div>
<img src="images/qian.svg" alt=""/>
<img src="images/hou.svg" alt=""/>
</div>
</body>
</html>
