十五、CSS 3新特性详解（三）——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style
生活随笔
收集整理的這篇文章主要介紹了
十五、CSS 3新特性详解（三）——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
HTML5 第三天
一、 認識 3D 轉(zhuǎn)換
- 近大遠小
- 物體和面遮擋不可見
-
x 軸：水平向右 – 注意：x 軸右邊是正值，左邊是負值
-
y 軸：垂直向下 – 注意：y 軸下面是正值，上面是負值
-
z 軸：垂直屏幕 – 注意：往外邊的是正值，往里面的是負值
?
二、3D 轉(zhuǎn)換
3D 轉(zhuǎ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 進行填充
三、透視 perspective
知識點講解
- 如果想要網(wǎng)頁產(chǎn)生 3D 效果需要透視(理解成 3D 物體投影的 2D 平面上)
- 實際上模仿人類的視覺位置，可視為安排一直眼睛去看
- 透視也稱為視距，所謂的視距就是人的眼睛到屏幕的距離
- 距離視覺點越近的在電腦平面成像越大，越遠成像越小
- 透視的單位是像素
知識要點
- 透視需要寫在被視察元素的父盒子上面
- 注意下方圖片
-
d：就是視距，視距就是指人的眼睛到屏幕的距離
-
z：就是 z 軸，z 軸越大(正值)，我們看到的物體就越大
-
?
代碼演示
body {perspective: 1000px; }四、 translateZ
- perspecitve 給父級進行設(shè)置，translateZ 給 子元素進行設(shè)置不同的大小
五、3D 旋轉(zhuǎn)rotateX
3D 旋轉(zhuǎn)指可以讓元素在三維平面內(nèi)沿著 x 軸、y 軸、z 軸 或者自定義軸進行旋轉(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 為角度
代碼案例
左手準則
-
左手的手拇指指向 x 軸的正方向
-
其余手指的彎曲方向就是該元素沿著 x 軸旋轉(zhuǎn)的方向
?
六、3D 旋轉(zhuǎn) rotateY
左手準則
-
左手的拇指指向 y 軸的正方向
-
其余的手指彎曲方向就是該元素沿著 y 軸旋轉(zhuǎn)的方向(正值)
?
七、 3D 旋轉(zhuǎn) rotateZ
- transform: rotate3d(x, y, z, deg) – 沿著自定義軸旋轉(zhuǎn) deg 為角度
- x, y, z 表示旋轉(zhuǎn)軸的矢量，是標識你是否希望沿著該軸進行旋轉(zhuǎn)，最后一個標識旋轉(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
-
☆☆☆☆☆
-
控制子元素是否開啟三維立體環(huán)境
-
transform-style: flat 代表子元素不開啟 3D 立體空間，默認的
-
transform-style: preserve-3d 子元素開啟立體空間
-
代碼寫給父級，但是影響的是子盒子
案例一：兩面翻轉(zhuǎn)的盒子
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>2面翻轉(zhuǎn)的盒子</title><style type="text/css">body {perspective: 450px;}.box {position: relative;width: 200px;height: 200px; border: 1px solid #ccc;margin: 200px auto;transition: all 2s;/* 讓背面的紫色盒子保留立體空間 給父級添加的 */transform-style: preserve-3d;}.box:hover {transform: rotateY(180deg);}.front,.back {position: absolute;width: 100%;height: 100%;border-radius: 50%;top: 0;left: 0; color: #fff;font-size: 30px;text-align: center;line-height: 200px;}.front {background-color: pink;z-index: 1;}.back {background-color: mediumpurple;/* 像手機一樣 背靠背 旋轉(zhuǎn) */transform: rotateY(180deg);}</style></head><body><div class="box"><div class="front">前端</div><div class="back">后端</div></div></body> </html>案例二：3D導(dǎo)航欄
案例三：旋轉(zhuǎn)木馬效果
瀏覽器的私有前綴：
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的十五、CSS 3新特性详解（三）——3D转换(位移、旋转、呈现)、透视perspective、旋转rotateX、Y、Z、呈现transform-style的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 路由算法及路由协议（详解）
- 下一篇： 八、pink老师的学习笔记—— CSS用