1.CSS3 2D轉(zhuǎn)換
轉(zhuǎn)換（transform）
是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素的位移、旋轉(zhuǎn)、縮放等效果
移動：translate
旋轉(zhuǎn)：rotate
縮放：scale
1.1二維坐標(biāo)系
1.2?2D 轉(zhuǎn)換之移動 translate
2D移動是2D轉(zhuǎn)換里面的一種功能，可以改變元素在頁面中的位置，類似
定位。
代碼
transform: translate(x,y); 或者分開寫
transform: translateX(n);
transform: translateY(n);
重點
定義 2D 轉(zhuǎn)換中的移動，沿著 X 和 Y 軸移動元素
translate最大的優(yōu)點：不會影響到其他元素的位置
translate中的百分比單位是相對于自身元素的 translate:(50%,50%);
對行內(nèi)標(biāo)簽沒有效果
1.3?2D 轉(zhuǎn)換之旋轉(zhuǎn) rotate
2D旋轉(zhuǎn)指的是讓元素在2維平面內(nèi)順時針旋轉(zhuǎn)或者逆時針旋轉(zhuǎn)。
語法
transform:rotate(度數(shù))重點
rotate里面跟度數(shù)， 單位是 deg 比如 rotate(45deg)
角度為正時，順時針，負(fù)時，為逆時針
默認(rèn)旋轉(zhuǎn)的中心點是元素的中心點
案例：三角形：
p::before {
content: '';
position: absolute;
right: 20px;
top: 10px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
}1.42D 轉(zhuǎn)換中心點 transform-origin
我們可以設(shè)置元素轉(zhuǎn)換的中心點
語法
transform-origin: x y;重點
注意后面的參數(shù) x 和 y 用空格隔開
x y 默認(rèn)轉(zhuǎn)換的中心點是元素的中心點 (50% 50%)
還可以給x y 設(shè)置 像素 或者 方位名詞 （top bottom left right center）
1.5?2D 轉(zhuǎn)換之縮放scale
縮放，顧名思義，可以放大和縮小。 只要給元素添加上了這個屬性就能控制它放大還是縮小。
語法
transform:scale(x,y);注意
1.注意其中的x和y用逗號分隔
2.transform:scale(1,1) ：寬和高都放大一倍，相對于沒有放大
3.transform:scale(2,2) ：寬和高都放大了2倍
4.transform:scale(2) ：只寫一個參數(shù)，第二個參數(shù)則和第一個參數(shù)一樣，相當(dāng)于 scale(2,2)
5.transform:scale(0.5,0.5)：縮小
6.sacle縮放最大的優(yōu)勢：可以設(shè)置轉(zhuǎn)換中心點縮放，默認(rèn)以中心點縮放的，而且不影響其他盒子
1.62D 轉(zhuǎn)換綜合寫法
1. 同時使用多個轉(zhuǎn)換，其格式為：transform: translate() rotate() scale() ...等，
2. 其順序會影轉(zhuǎn)換的效果。（先旋轉(zhuǎn)會改變坐標(biāo)軸方向）
3. 當(dāng)我們同時有位移和其他屬性的時候，記得要將位移放到最前
2.CSS3 動畫
動畫（animation）
是CSS3中具有顛覆性的特征之一，可通過設(shè)置多個節(jié)點來精確控制一個或一組動畫 ，常用來實現(xiàn)復(fù)雜的動畫效果。
相比較過渡，動畫可以實現(xiàn)更多變化，更多控制，連續(xù)自動播放等效果。
2.1動畫的基本使用
制作動畫分為兩步：
1. 先定義動畫
2. 再使用（調(diào)用）動畫
1. 用keyframes 定義動畫（類似定義類選擇器）
語法
@keyframes 動畫名稱 {
0%{
width:100px;
}
100%{
width:200px;
}
}
動畫序列
1. 0% 是動畫的
開始
，100% 是動畫的
完成
。這樣的規(guī)則就是動畫序列。
2.在
@keyframes
中規(guī)定某項 CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動畫效果。
3.動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。您可以改變?nèi)我舛嗟臉邮饺我舛嗟?/span>
次數(shù)
4.請用百分比來規(guī)定變化發(fā)生的時間，或用關(guān)鍵詞 "
from
" 和 "
to
"，等同于
0%
和
100%
。
2. 元素使用動畫
語法
div {
width: 200px;
height: 200px;
background-color: aqua;
margin: 100px auto;
/* 調(diào)用動畫 */
animation-name: 動畫名稱;
/* 持續(xù)時間 */
animation-duration: 持續(xù)時間;
}2.2動畫常用屬性
2.3動畫簡寫屬性
animation：動畫名稱 持續(xù)時間 運動曲線 何時開始 播放次數(shù) 是否反方向 動畫起始或者結(jié)束的狀態(tài);
animation: myfirst 5s linear 2s infinite alternate;
簡寫屬性里面不包含 animation-play-state
暫停動畫：animation-play-state: puased; 經(jīng)常和鼠標(biāo)經(jīng)過等其他配合使用
想要動畫走回來 ，而不是直接跳回來：animation-direction ： alternate
盒子動畫結(jié)束后，停在結(jié)束位置： animation-fill-mode ： forwards
2.4速度曲線細(xì)節(jié)
animation-timing-function：規(guī)定動畫的速度曲線，默認(rèn)是“ease”
文章來源：http://www.zghlxwxcb.cn/news/detail-843968.html
3.CSS3 3D轉(zhuǎn)換
3.1三維坐標(biāo)系
三維坐標(biāo)系其實就是指立體空間，立體空間是由3個軸共同組成的。
x軸：水平向右
注意： x 右邊是正值，左邊是負(fù)值
y軸：垂直向下
注意： y 下面是正值，上面是負(fù)值
z軸：垂直屏幕
注意： 往外面是正值，往里面是負(fù)值
3.2?3D移動 translate3d ?
3D移動在2D移動的基礎(chǔ)上多加了一個可以移動的方向，就是z軸方向。
translform:translateX(100px)：僅僅是在x軸上移動
translform:translateY(100px)：僅僅是在Y軸上移動
translform:translateZ(100px)：僅僅是在Z軸上移動（注意：translateZ一般用px單位）
transform:translate3d(x,y,z)：其中 x、y、z 分別指要移動的軸的方向的距離
因為z軸是垂直屏幕，由里指向外面，所以默認(rèn)是看不到元素在z軸的方向上移動
3.3透視 perspective
在2D平面產(chǎn)生近大遠(yuǎn)小視覺立體，但是只是效果二維的
如果想要在網(wǎng)頁產(chǎn)生3D效果需要透視（理解成3D物體投影在2D平面內(nèi)）。
模擬人類的視覺位置，可認(rèn)為安排一只眼睛去看
透視我們也稱為視距：
視距就是人的眼睛到屏幕的距離
距離視覺點越近的在電腦平面成像越大，越遠(yuǎn)成像越小
透視的單位是像素
透視寫在被觀察元素的父盒子上面的
d
：就是視距，視距就是一個距離人的眼睛到屏幕的距離。
z
：就是 z軸，物體距離屏幕的距離，z軸越大（正值） 我們看到的物體就越大。
3.4translateZ
translform:translateZ(100px)：僅僅是在Z軸上移動。
有了透視，就能看到translateZ 引起的變化了
translateZ：近大遠(yuǎn)小
translateZ：往外是正值
translateZ：往里是負(fù)值
3.5?3D旋轉(zhuǎn) rotate3d
3D旋轉(zhuǎn)指可以讓元素在三維平面內(nèi)沿著 x軸，y軸，z軸或者自定義軸進行旋轉(zhuǎn)。
語法
?
transform:rotateX(45deg)：沿著x軸正方向旋轉(zhuǎn) 45度
transform:rotateY(45deg) ：沿著y軸正方向旋轉(zhuǎn) 45deg
transform:rotateZ(45deg) ：沿著Z軸正方向旋轉(zhuǎn) 45deg
transform:rotate3d(x,y,z,deg)： 沿著自定義軸旋轉(zhuǎn) deg為角度（了解即可）
對于元素旋轉(zhuǎn)的方向的判斷 我們需要先學(xué)習(xí)一個左手準(zhǔn)則。
左手準(zhǔn)則
左手的手拇指指向 x軸的正方向
其余手指的彎曲方向就是該元素沿著x軸旋轉(zhuǎn)的方向
左手準(zhǔn)則
左手的手拇指指向 y軸的正方向
其余手指的彎曲方向就是該元素沿著y軸旋轉(zhuǎn)的方向（正值）
文章來源地址http://www.zghlxwxcb.cn/news/detail-843968.html
rotateX
rotateY
rtate
3.63D呈現(xiàn) transfrom-style
控制子元素是否開啟三維立體環(huán)境。。
transform-style: flat 子元素不開啟3d立體空間 默認(rèn)的
trnsform-style: preserve-3d; 子元素開啟立體空間
代碼寫給父級，但是影響的是子盒子
到了這里，關(guān)于CSS2D3D轉(zhuǎn)換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)7（HTML5、CSS3、JavaScript ）CSS的定位機制——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
