位移translate
- 格式：
（1）transform: translate(x, y) // x是x軸上移動的位置，y是y軸上移動的位置
（2）只移動x坐標(biāo)：①transform: translateX(100px) ②transform: translate(100px, 0)
（3）只移動y坐標(biāo)：①transform: translateY(100px) ②transform: translate(0, 100px) - 注意點
（1）優(yōu)點：不會影響其他盒子的位置。
（2）translate中的百分比單位是相對于自身元素的translate:(50%,50%)
（3）對行內(nèi)標(biāo)簽沒有效果
旋轉(zhuǎn)rotate
- 語法：transform:rotate(度數(shù))
（1）rotate里面跟度數(shù)睦擂，單位是deg，比如rotate(45deg)杖玲；
（2）角度為正時順時針旋轉(zhuǎn)顿仇，角度為負(fù)時逆時針旋轉(zhuǎn)；
（3）默認(rèn)旋轉(zhuǎn)中心點是元素的中心點摆马。 - 設(shè)置元素轉(zhuǎn)換中心點
語法：transform-origin
（1）可以跟方位名詞：默認(rèn)情況的50%, 50%等價于center, center臼闻；還可以設(shè)置left, bottom（旋轉(zhuǎn)中心左下角）
（2）可以設(shè)置百分比
（3）還可以設(shè)置像素
縮放scale
- 語法
（1）transform: scale(x, y) // x表示寬度縮放倍數(shù)，y表示高度縮放倍數(shù)
（2）transform: scale(1, 1) // 寬和高都放大了一倍囤采，相當(dāng)于沒有放大述呐，相當(dāng)于transform: scale(1)
（3）可以設(shè)置轉(zhuǎn)換中心點縮放，默認(rèn)以中心點縮放蕉毯，而且不影響其他盒子
綜合案例
- 同時適用多個轉(zhuǎn)換乓搬，其格式為：
transform: translateX() rotate() scale()....
- 其順序會影響轉(zhuǎn)換的效果思犁，故當(dāng)同時有位移和其他屬性的時候，要將位移放在最前面
動畫
- 定義
動畫是CSS3中具有顛覆性的特征之一进肯，相比于過渡激蹲，動畫可以實現(xiàn)更多變化、更多控制江掩、連續(xù)自動播放等效果学辱。 - 基本使用
（1）先定義動畫
用keyframes定義動畫（類似定義類選擇器）
@keyframes 動畫名稱 {
0% { // 0%是動畫的開始
transform: translateX(0px);
}
100% { // 100%是動畫的結(jié)尾
transform: translateX(1000px);
}
}
（2）再調(diào)用動畫
div {
width: 200px;
height: 200px;
animation-name: 動畫名稱;
animation-duration: 持續(xù)時間; // 單位s或ms
}
（3）動畫序列
①0%是動畫的開始，100%是動畫的結(jié)尾频敛，這樣的規(guī)則稱為動畫序列
@keyframes 動畫名稱 {
from {
transform: translateX(0px);
}
to {
transform: translateX(1000px);
}
}
等價于
@keyframes 動畫名稱 {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(1000px);
}
}
② 可以改變?nèi)我舛嗟臉邮饺我舛嗟拇螖?shù)项郊，里面的百分比要是整數(shù)且百分比是總的時間的劃分。如實現(xiàn)下圖效果
@keyframes 動畫名稱 {
0% {
transform: translate(0, 0);
};
25% {
transform: translate(1000px, 0);
};
50% {
transform: translate(1000px, 500px);
};
75% {
transform: translate(0px, 500px);
};
100% {
transform: translate(0, 0);
};
}
image.png
（4）動畫屬性
（5）速度曲線
（6）元素可以添加多個動畫斟赚，用逗號隔開着降。
3D轉(zhuǎn)換
- 3D旋轉(zhuǎn)
（1）定義：指可以讓元素在三維平面內(nèi)沿著x軸、y軸拗军、z軸或自定義軸進行旋轉(zhuǎn)任洞。
transform: rotateX(45deg) // 沿著x軸正方向旋轉(zhuǎn)45度
transform: rotate3d(x, y, z, deg) // 沿著自定義軸旋轉(zhuǎn)deg度（了解即可），例transform: rotate3d(1, 0, 0, 45deg)表示沿x軸旋轉(zhuǎn)45度发侵。
（2）左手法則用于元素方向的判斷：左手的手拇指指向x軸的正方向交掏，其余手指彎曲的方向就是該元素沿著x軸旋轉(zhuǎn)的方向。
- 3D呈現(xiàn)transform-style
（1）transform-style: flat; 默認(rèn)子元素不開啟3D立體空間刃鳄。
（2）transform-style: preserve-3d; 子元素開啟立體空間盅弛。
（3）代碼寫在父元素上，但是影響的是子元素叔锐。
瀏覽器私有前綴
-moz-：代表火狐瀏覽器
-ms-：代表ie瀏覽器
-webkit-：代表safari挪鹏、chrome瀏覽器
-o-：代表Opera私有屬性
css3新增
image.png
