2D 變形 transform
實現元素的位移、旋轉、傾斜、縮放，甚至支持矩陣方式配合過渡和其它動畫，取代大量只能靠Flash纔可實現的效果
旋轉：translate
縮放：rotate
傾斜：skew
設置旋轉中心軸：transform-origin
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
transition: all 0.5s;
transform-origin: left top; /* 2 旋轉中心的爲左上角 */
transform-origin: 10px 10px; /* 2 也可以設置精確數值 */
}
div:active { /* 鼠標點擊，馬上變化（鼠標未鬆開就觸發） */
transform: translate(50px,50px); /*1 移動*/
/* transform: translate(50%); 若移動%，則移動自己的width的百分比*/
transform: scale(0.8,0.1); /*縮放*/
/* transform: scaleX(0.8);
transform: scaleY(0.8); */
transform: rotate(45deg); /* 2 旋轉 deg度數 */
transform: skew(30deg,0deg); /*3 傾斜,第二個參數不寫默認0，取值正負皆可*/
transform: skew(30deg);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3D變形
左手法則--手背朝向自己豎食指（Y軸），右橫大拇指*X軸），中指朝前（Z軸）
X左邊是負的，右邊是正的
Y上面是負的，下面是負的
Z裏面是正的，外面是負的
1. 旋轉 (ratate)
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
transition: all 2s;
}
div:hover {
transform: rotateX(45deg); /* 沿着X軸旋轉45度 */
transform: rotateY(45deg); /* 沿着Y軸旋轉45度 */
transform: rotateZ(45deg); /* 沿着Z軸旋轉45度 */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
2.透視（perspective）
透視可以將一個 2D平面，在轉換過程中，呈現3D效果
透視原理： 近大遠小
瀏覽器透視：將近大遠小的所有圖像，透視在屏幕上
perspective： 視距，表示視點距離屏幕的長短。 視點，模擬透視效果時人眼的位置
<html>
<head>
<style>
body{
perspective: 1000px; /*近大遠小 視距數值越大效果越不明顯*/
}
div {
width: 200px;
height: 100px;
margin: 100px auto;
background-color: red;
transition: all 5s;
display: block;
}
div:hover {
transform: rotateX(360deg); /* 沿着X軸旋轉45度 */
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3.移動
/*
translateX
translateY
translateZ
*/
<html>
<head>
<style>
body{
perspective: 600px; /*近大遠小 視距數值越大效果越不明顯*/
}
div {
width: 200px;
height: 100px;
margin: 100px auto;
background-color: red;
transition: all 5s;
display: block;
}
div:hover {
transform: translateX(100px);
transform: translateY (100px);
transform: translateZ(600px);
/* 透視是眼睛到屏幕的距離 展現一種3D效果 近大遠小
translateZ是展現 目標到屏幕的距離
Z越大，物體越近
*/
/* 綜合寫法 */
transform: translate3d(x,y,z); /* x,y取值可以是px或%，z只能是px */
</style>
</head>
<body>
<div>
</div>
</body>
</html>
示例：開門效果
<html>
<head>
<style>
body {
perspective: 1000px;
/*給父盒子添加透視效果，近大遠小*/
}
section {
position: relative;
width: 400px;
height: 240px;
margin: 100px auto;
background-color: blue;
border: 1px solid #000;
}
.door-l,
.door-r {
position: absolute;
width: 50%;
height: 100%;
background-color: yellow;
top: 0;
transition: all 5s;
display: block;
}
.door-l {
left: 0;
border-right: 1px solid #000;
transform-origin: left;
/*設置旋轉中心軸*/
}
.door-r {
right: 0;
border-left: 1px solid #000;
transform-origin: right;
/*設置旋轉中心軸*/
}
.door-l::before,
.door-r::before {
content: "";
position: absolute;
top: 50%;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 50%;
/*圓角*/
transform: translateY(-50%);
/*平移自己高度的一半*/
}
.door-r::before {
left: 5px;
}
.door-l::before {
right: 5px;
}
section:hover .door-l {
transform: rotateY(-130deg);
/* 沿着Y軸旋轉 */
}
section:hover .door-r {
transform: rotateY(130deg);
/* 沿着Y軸旋轉 */
}
</style>
</head>
<body>
<section>
<div class="door-l"></div>
<div class="door-r"></div>
</section>
</body>
</html>
backface-visibility
定義元素不面向屏幕時是否可見
硬幣3D翻轉示例（可自己用1元RMB圖片代替）
示例爲紅色正面，藍色反面
<html>
<head>
<style>
section {
position: relative;
width: 400px;
height: 400px;
margin: 100px auto;
}
.a,
.b {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
transition: all 2s;
display: block;
}
.a {
z-index: 1;
backface-visibility: hidden;
background-color: red;
}
.b {
background-color: blue;
}
section:hover .a {
transform: rotateY(-180deg);
/* 沿着Y軸旋轉 */
}
section:hover .b {
transform: rotateY(180deg);
/* 沿着Y軸旋轉 */
}
</style>
</head>
<body>
<section>
<div class="a"></div>
<div class="b"></div>
</section>
</body>
</html>