原子化 CSS 框架 我記得很久之前有時候為了少寫些css，我們通常會有如下的樣板代碼 .block { display: block; } .flex { display:flex } .flex-center { align-items: center; justify-content: cen ...
今天介紹 兩種 3D變形的形式：3D旋轉、空間位移。
3D旋轉
在上一節 2D變形中， 我們用到了 transform 屬性。那麼在3D旋轉中同樣還是這個屬性（怎麼老是它，手動狗頭）。
用rotateX() 函數來給 transform 屬性賦值，即可實現元素標簽繞X（橫）軸3D旋轉。
語法
// 繞橫軸（盒子X軸中心線 旋轉 30 度）
transform: **rotateX**(30deg)
用rotateY() 函數來給 transform 屬性賦值，即可實現元素標簽繞Y（橫）軸3D旋轉。
語法
// 繞縱軸（盒子Y軸中心線 旋轉 30 度）
transform: **rotateY**(30deg)
用rotateZ() 函數來給 transform 屬性賦值，即可實現元素標簽繞Z（豎）軸3D旋轉。
語法
// 繞縱軸（盒子Y軸中心線 旋轉 30 度）
transform: **rotateZ**(30deg)
如果只用單獨的transform 和 一個空間旋轉函數 來做，可能視覺上並不能達到要求。
舉例
紅色部分就是 box1 , 其實它是一個正方形，當我們 設置了 X軸旋轉後，它看起來像一個 長方形， 其實這是因為 旋轉造成的， 而網頁又是一個平面，我們看不到旋轉到裡面的那一部分，所以呈現出來的就是一個長方形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
transform: rotateX(30deg);
}
.parentBox {
width: 200px;
height: 200px;
border: 1px orange solid;
margin: auto;
}
</style>
</head>
<body>
<div class="parentBox">
<div class="box1"></div>
</div>
</body>
</html>
如果想看出是旋轉的樣子，還需要一個屬性配合, 那就是 perspective。
perspective
perspective 表示 觀察者（人）到 平面元素的 距離。值越大，表示距離平面元素越遠。
配合 transform 如下
舉例
實現 子元素 沿X軸旋轉 30度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
<title>3D旋轉示例</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
transform: rotateX(30deg);
}
.parentBox {
width: 200px;
height: 200px;
border: 2px green solid;
margin: auto;
margin-top: 10px;
perspective: 300px;
}
</style>
</head>
<body>
<div class="parentBox">
<div class="box1"></div>
</div>
</body>
</html>
元素可以同時繞多個軸旋轉，例如 繞X軸旋轉30度，繞Y軸旋轉30度。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=<device-width>, initial-scale=1.0" />
<title>3D旋轉示例1</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: red;
transform: rotateX(30deg) rotateY(30deg);
}
.parentBox {
width: 200px;
height: 200px;
border: 2px green solid;
margin: auto;
margin-top: 10px;
perspective: 300px;
}
</style>
</head>
<body>
<div class="parentBox">
<div class="box1"></div>
</div>
</body>
</html>
空間位移
當元素髮生 3D旋轉後，就可以進行空間位移。註意 一定要是發生旋轉後，才可以看出位移效果，否則就和2D平面位移沒啥區別了。
用 translateX()、 translateY()、translateZ() 給 transform 賦值，就可以分別 發生三個方向X軸，Y軸，Z軸方向的移動。三個位移函數接收參數支持長度單位。
語法
// 發生3D旋轉後， 才能看出3D效果
// 可以同時發生多個方向位移
transform: rotateX(30deg) translateX(30px) translateY(30px);
舉例
一個元素， 在X軸方向發生30px距離的位移， 在Y軸方向發生30px的位移。效果如下
<!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>空間位移</title>
<style>
p {
width: 200px;
height: 200px;
background-color: orange;
}
.box1 {
width: 202px;
height: 202px;
border: 1px solid black;
perspective: 300px;
}
.box1 p {
transform: rotateX(30deg) translateX(30px) translateY(30px);
}
</style>
</head>
<body>
<div class="box1">
<p></p>
</div>
</body>
</html>
微信公眾號
