一霍转、 認(rèn)識 3D 轉(zhuǎn)換
-
3D的特點(diǎn)- 近大遠(yuǎn)小
- 物體和面遮擋不可見
- 三維坐標(biāo)系
x 軸：水平向右 -- 注意：x 軸右邊是正值，左邊是負(fù)值
y 軸：垂直向下 -- 注意：y 軸下面是正值，上面是負(fù)值
-
z 軸：垂直屏幕 -- 注意：往外邊的是正值，往里面的是負(fù)值
sanwei.png
二、3D 轉(zhuǎn)換
-
3D轉(zhuǎn)換知識要點(diǎn)-
3D位移：translate3d(x, y, z) -
3D旋轉(zhuǎn)：rotate3d(x, y, z) - 透視：
perspctive -
3D呈現(xiàn)transfrom-style
-
3D移動translate3d
-
3D移動就是在2D移動的基礎(chǔ)上多加了一個可以移動的方向，就是 z 軸方向 -
transform: translateX(100px)：僅僅是在 x 軸上移動 -
transform: translateY(100px)：僅僅是在 y 軸上移動 -
transform: translateZ(100px)：僅僅是在 z 軸上移動 -
transform: translate3d(x, y, z)：其中x殴泰、y于宙、z 分別指要移動的軸的方向的距離 - 注意：x, y, z 對應(yīng)的值不能省略，不需要填寫用 0 進(jìn)行填充
- 語法
transform: translate3d(x, y, z)
- 代碼演示
transform: translate3d(100px, 100px, 100px)
/* 注意：x, y, z 對應(yīng)的值不能省略悍汛，不需要填寫用 0 進(jìn)行填充 */
transform: translate3d(100px, 100px, 0)
三捞魁、透視 perspective
-
知識點(diǎn)講解
- 如果想要網(wǎng)頁產(chǎn)生
3D效果需要透視(理解成3D物體投影的2D平面上) - 實際上模仿人類的視覺位置，可視為安排一直眼睛去看
- 透視也稱為視距离咐，所謂的視距就是人的眼睛到屏幕的距離
- 距離視覺點(diǎn)越近的在電腦平面成像越大谱俭，越遠(yuǎn)成像越小
- 透視的單位是像素
- 如果想要網(wǎng)頁產(chǎn)生
-
知識要點(diǎn)
- 透視需要寫在被視察元素的父盒子上面
- 注意下方圖片
d：就是視距，視距就是指人的眼睛到屏幕的距離
-
z：就是 z 軸宵蛀，z 軸越大(正值)昆著，我們看到的物體就越大
perspective.png
?
-
代碼演示
body { perspective: 1000px; }
四、 translateZ
-
translateZ與perspecitve的區(qū)別
-
perspecitve給父級進(jìn)行設(shè)置术陶，translateZ給 子元素進(jìn)行設(shè)置不同的大小
五凑懂、3D 旋轉(zhuǎn)rotateX
3D 旋轉(zhuǎn)指可以讓元素在三維平面內(nèi)沿著 x 軸、y 軸梧宫、z 軸 或者自定義軸進(jìn)行旋轉(zhuǎn)
-
語法
-
transform: rotateX(45deg)-- 沿著 x 軸正方向旋轉(zhuǎn) 45 度 -
transform: rotateY(45deg)-- 沿著 y 軸正方向旋轉(zhuǎn) 45 度 -
transform: rotateZ(45deg)-- 沿著 z 軸正方向旋轉(zhuǎn) 45 度 -
transform: rotate3d(x, y, z, 45deg)-- 沿著自定義軸旋轉(zhuǎn) 45 deg 為角度
-
代碼案例
div {
perspective: 300px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateX(-45deg)
}
-
左手準(zhǔn)則
左手的手拇指指向 x 軸的正方向
-
其余手指的彎曲方向就是該元素沿著 x 軸旋轉(zhuǎn)的方向
rotateX.png
六接谨、3D 旋轉(zhuǎn) rotateY
- 代碼演示
div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateY(180deg)
}
-
左手準(zhǔn)則
左手的拇指指向 y 軸的正方向
-
其余的手指彎曲方向就是該元素沿著 y 軸旋轉(zhuǎn)的方向(正值)
rotateY.png
七、 3D 旋轉(zhuǎn) rotateZ
- 代碼演示
div {
perspective: 500px;
}
img {
display: block;
margin: 100px auto;
transition: all 1s;
}
img:hover {
transform: rotateZ(180deg)
}
rotate3d
-
transform: rotate3d(x, y, z, deg)-- 沿著自定義軸旋轉(zhuǎn) deg 為角度 - x, y, z 表示旋轉(zhuǎn)軸的矢量塘匣，是標(biāo)識你是否希望沿著該軸進(jìn)行旋轉(zhuǎn)脓豪，最后一個標(biāo)識旋轉(zhuǎn)的角度
-
transform: rotate3d(1, 1, 0, 180deg)-- 沿著對角線旋轉(zhuǎn) 45deg -
transform: rotate3d(1, 0, 0, 180deg)-- 沿著 x 軸旋轉(zhuǎn) 45deg
-
-
代碼演示
div { perspective: 500px; } img { display: block; margin: 100px auto; transition: all 1s; } img:hover { transform: rotate3d(1, 1, 0, 180deg) }
八、3D 呈現(xiàn) transform-style
transform-style
- ☆☆☆☆☆
- 控制子元素是否開啟三維立體環(huán)境
- `transform-style: flat` 代表子元素不開啟 `3D` 立體空間忌卤，默認(rèn)的
- `transform-style: preserve-3d` 子元素開啟立體空間
- 代碼寫給父級扫夜，但是影響的是子盒子
- 代碼演示
<!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>Document</title>
<style>
body {
perspective: 500px;
}
.box {
position: relative;
width: 200px;
height: 200px;
margin: 100px auto;
transition: all 2s;
/* 讓子元素保持3d立體空間環(huán)境 */
transform-style: preserve-3d;
}
.box:hover {
transform: rotateY(60deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
}
.box div:last-child {
background-color: purple;
transform: rotateX(60deg);
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
</div>
</body>
</html>
