前端移動web
阿新 • • 發佈：2022-03-24
- 字型圖示 iconfont
-
平面轉換
-
縮放
-
scale() 方法
- 該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的引數：
- 該元素增加或減少的大小，取決於寬度（X軸）和高度（Y軸）的引數：
-
scale() 方法
-
旋轉
-
rotate() 方法
- 在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
- 在一個給定度數順時針旋轉的元素。負值是允許的，這樣是元素逆時針旋轉。
-
rotate() 方法
-
移動
-
translate() 方法
- 只有一個值時候 預設是水平方向右
- 有兩個值 根據左(X軸)和頂部(Y軸)位置給定的引數，從當前元素位置移動。
- 移動的參照物 都是移動自身
- 只有一個值時候 預設是水平方向右
-
translate() 方法
-
縮放
-
漸變
- background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
- transparent 透明度
- background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
-
空間位移
- translate3d(x,y,z) 3D轉換
- translate3d(x,y,z) 3D轉換
-
透視
- perspective: 800-1200px ;
- 給要透視的父級元素
- perspective: 800-1200px ;
-
旋轉
- transform: rotateX(); transform: rotateY(); transform: rotateZ();
- transform: rotateX(); transform: rotateY(); transform: rotateZ();
-
立體呈現
- transform-style: preserve-3d;
- transform-style: preserve-3d;
-
動畫
-
定義動畫
- @keyframes lalala {
- from {}
- to {}
- }
- @keyframes lalala {
- 使用動畫 animation: 動畫名字 加 時間;
-
定義動畫