?一、CSS 2D轉(zhuǎn)換
轉(zhuǎn)換（transform）是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素的位移(translate)、旋轉(zhuǎn)(rotate)、縮放（scale）等效果
移動盒子的位置：定位、盒子的外邊距、2d轉(zhuǎn)換移動
1、2D轉(zhuǎn)換之移動translate
1、我們tranlate里面的參數(shù)是可以用%
2、如果里面的參數(shù)是%? 移動的距離是? 盒子自身的寬度或者高度來對比的
3、tranlate對于行內(nèi)元素是無效的
2、2D轉(zhuǎn)換之旋轉(zhuǎn) rotate
3、2D轉(zhuǎn)換中心點 transform-origin
4、2D轉(zhuǎn)換之縮放 scale
二、CSS3動畫 animation
動畫是CSS3中具有顛覆性的特征之一，可通過設置多個節(jié)點來精準控制一個動畫
1、一個完整的動畫序列
1、可以做多個狀態(tài)的變化? keyframe 關鍵幀
2、里面的百分比是整數(shù)
3、里面的百分比就是? 總的時間的劃分
2、動畫常用屬性
infinite 無限次
3、動畫簡寫屬性
animation： 動畫名稱 持續(xù)時間? 運動曲線 何時開始? 播放次數(shù) 是否反方向? 動畫起始或者結束的狀態(tài)；
前面兩個一定要寫
大數(shù)據(jù)熱點圖案例
中間的小圓點
不要用scale 因為它會讓陰影變大
4、速度曲線細節(jié)
速度曲線步長案例
奔跑的小熊動畫案例
三、CSS 3D轉(zhuǎn)換
3D特點：近大遠小，物體后面遮擋不可見
1、三維坐標系
X軸： 水平向右? ?X軸右邊是正值，左邊是負值
Y軸： 垂直向下? ?Y下面是正值，上面是負值
Z軸： 垂直屏幕? 往外面是正值，往里面是負值
3D轉(zhuǎn)換我們主要學習最常用的3D位移和 3D旋轉(zhuǎn)
3D位移： translate3d(x,y,z)
3D旋轉(zhuǎn)： rotate3d(x,y,z)
透視： perspective
3D呈現(xiàn)? transfrom-style
2、3D移動? translate3d
3、透視 perspective
透視寫在被觀察元素的父盒子上面的
d： 就是視距，視距是一個距離人的眼睛到屏幕的距離
z： 就是z軸，物體距離屏幕的距離，z軸越大（正值）我們看到的物體越大
有了透視就能看到translateZ引起的變化
4、3D旋轉(zhuǎn) rotate3d
可以讓元素在三維平面內(nèi)沿著x軸，y軸，z軸或者自定義軸進行旋轉(zhuǎn)
左手的拇指指向y軸的正方向，其余手指的彎曲方向就是該元素沿著y軸旋轉(zhuǎn)的方向（正值）
z軸就是像轉(zhuǎn)盤一樣旋轉(zhuǎn)
5、3D呈現(xiàn) transform-style
雙面翻轉(zhuǎn)盒子案例
box父盒子里面包含前后兩個子盒子，box是翻轉(zhuǎn)的盒子? front是前面盒子 back是后面盒子
3D導航欄案例
旋轉(zhuǎn)木馬案例
搭建HTML結構時需要<setion>標簽里面是<div>標簽
千萬不要忘給父盒子section 添加? transform-style: preserve-3d;
給父盒子添加動畫效果
鼠標放入section 停止動畫?
section：hover? {
animation-play-state：paused；
}
四、瀏覽器私有前綴
1、私有前綴
-moz-： 代表Firefox 瀏覽器私有屬性
-ms-：? 代表IE瀏覽器私有屬性
-webkit-：? 代表Safari、Chrome私有屬性
-o- ：? 代表Opera私有屬性文章來源：http://www.zghlxwxcb.cn/news/detail-849109.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-849109.html
到了這里，關于CSS 2D轉(zhuǎn)換 動畫 3D轉(zhuǎn)換的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
