- perspective元素距離視線的距離(1000-3000px)
模擬近大遠小效果,新增給父元素
- perspective-origin觀察子元素的視角(預設值為中心點)
- transform-style:preserve-3d;子元素保留3d轉換位置
- backface-visibility: hidden;子元素背面不可見,新增給子元素
- 位移
transform: translatez(300px);沿著z軸移動
transform: translate3d(100px,200px,300px);xyz軸共同作用
- 旋轉
transform:rotatex(45deg);
transform:rotatey(45deg);
transform:rotatez(45deg);就是2d的順逆時針
transform:rotate3d(x,y,z,45deg);
- 縮放
transform:scalez();
- 定義動畫
@keyframes 動畫名稱
50%100%
}- 執行動畫
animation:動畫名稱 持續時間 過渡型別 延遲時間 次數 是否反向;
過渡型別：勻速linear
次數：無限次infinite
是否反向：反向運動alternate
animation-play-state:paused;動畫暫停
- 字首
-webkit- 谷歌和safari
-ms- ie的
-o- opera
-moz- 火狐
H5 動畫屬性 3d屬性
animation 規定動畫 keyframes name to keyframes name 10 20 30 40 50 60 70 100 動畫屬性 charset utf 8 title type text css divdiv hover 關鍵幀 keyframes movedhto st...
H5 學習筆記3
html標籤 表單 input標籤 屬性 type text文字框 password密碼框 radio單選框 checkbox多選框 button按鈕 reset重置 submit提交 select標籤 屬性 option 下來框 textarea標籤 文字域 button標籤 作用範圍比較廣 fo...
h5動畫工具推薦
1.animate.css 一款強大的預設css3動畫庫 2.granim 用於快速建立 web 內的令人嘆為觀止的漸變動畫 3.animsition 過渡動畫庫 4.ityped 打字動畫 5.smoothstate.js 載入優化。對於首頁的啟動 回跳進行載入動畫優化 6.mojs css 動效...