transform: 變形。改變
語法：transform: none|transform-functions;
旋轉 rotate
- 2D 旋轉：rotate(angle) 順時針旋轉給定的角度，允許負值
rotate(30deg) - 3D 旋轉：rotate3d(x,y,z,angle)
- 沿着 X 軸的 3D 旋轉：rotateX(angle)
- 定義沿着 Y 軸的 3D 旋轉：rotateY(angle)
- 定義沿着 Z 軸的 3D 旋轉：rotateZ(angle)
拉伸 skew
- 沿着 X 和 Y 軸的 2D 傾斜轉換：skew(x-angle,y-angle)。舉例：
skew(30deg,20deg) - 沿着 X 軸的 2D 傾斜轉換：skewX(angle)
- 沿着 Y 軸的 2D 傾斜轉換：skewY(angle)
縮放 scale
- 2D 縮放轉換：scale(x,y)
- 通過設置 X 軸的值來定義縮放轉換：scaleX(x)。舉例：
scaleX(1)，實際效果相當於盒子被拉寬x倍，1的話就沒有改變。 - 通過設置 Y 軸的值來定義縮放轉換：scaleX(y)。
- 3D 縮放轉換：scale3d(x,y,z)
- 通過設置 Z 軸的值來定義 3D 縮放轉換：scaleZ(z)
開發中遇到的問題以及解決：
-
在開發中發現，畫一個圓點，設置的寬高數值比較小時
width: 0.15rem; height: 0.15rem; border-radius: 50%;，發現圓形並沒有那么圓。
猜想問題原因：個人認為是 js 對浮點數計算不精確，導致的。
解決辦法1：調整寬高，比如：width：0.14rem; height: 0.14rem; （有時候能起作用，治標不治本）
解決辦法2：設置 width: 15rem; height: 15rem; transform: scale(0.1); transform-origin: center center; （先放大，再縮小，比較好） -
突破瀏覽器限制字體大小不能低於12px的限制
p: {
font-size: 12px;
-webkit-transform: scale(0.75); /* 縮小至原的0.75倍 */
}
偏移 translate
- 2D 偏移：translate(x,y)
- 延 X 軸移動 translateX(x)
- 延 Y 軸移動 translateX(y)
- 3D 偏移：translate3d(x,y,z)
- 延 Z 軸移動 translateX(z)
各個瀏覽器兼容寫法舉例：
.box{
transform: translate(50px, 100px);
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari游獵 和 Chrome谷歌 */
-o-transform: translate(50px, 100px); /* Opera */
-moz-transform: translate(50px, 100px);} /* Firefox */
矩陣 matrix
- 2D 轉換，使用六個值的矩陣：matrix(n,n,n,n,n,n)，同做矩陣的方式實現所有的2D轉換方法
- 3D 轉換，使用 16 個值的 4x4 矩陣：matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
矩陣解釋起來有點長，它的作用也完全能被更好理解的其它方式代替，這里不展開介紹。
透視 perspective
- 為 3D 轉換元素定義透視視圖：perspective(n)
作用：perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
注：perspective 屬性只影響 3D 轉換元素。
例子：
#father {
width: 100vw;
height: 100vh;
border: 1px solid #000;
position: relative;
display: flex;
justify-content: center;
align-items: center;
perspective: 100px;
perspective-origin: center center;
}
#child {
height: 100px;
width: 100px;
cursor: pointer;
position: absolute;
animation: mymove 3s linear 0s 1 normal;
background-color: aqua;
transform:
rotate3d(1, 0, 0, 360deg)
scale3d(1, 1, 2)
translate3d(0px, 0px, 10px);
}
-------------------------------------------
<div id="father">
<div id="child">看效果</div>
</div>
起點位置 transform-origin
改變起點位置 transform-origin: x-axis y-axis z-axis; 分別定義了，x軸、y軸、z軸的偏移量，允許負數。
- x-axis、y-axis 的值：
- 關鍵字[keyword]：top、left、center、right、bottom。
- 具體值：%、em、px等
- z-axis 的值：[length]
下面例子中的三種寫法都是相等的,也是 transform-origin 的默認值：
#app {
transform-origin: center
transform-origin: center center 0
transform-origin: 50% 50% 0
}
關鍵字和百分比之間的對應關系：
- top = top center = center top = 50% 0
- right = right center = center right = 100%或(100% 50%)
- bottom = bottom center = center bottom = 50% 100%
- left = left center = center left = 0或(0 50%)
- center = center center = 50%或（50% 50%）
- top left = left top = 0 0
- right top = top right = 100% 0
- bottom right = right bottom = 100% 100%
- bottom left = left bottom = 0 100%
transition:允許CSS屬性值在一定的時間區間內平滑的過渡，
需要事件的觸發，例如單擊、獲取焦點、失去焦點等
transition:property duration timing-function delay;
- property: CSS的屬性，例如：width|height|all 為 none 時停止所有的運動，可以為 transform
- duration: 持續時間
- timing-function: 過渡效果
可能的取值：- linear 勻速，等於 cubic-bezier(0,0,1,1)
- ease 塊慢塊，等於 cubic-bezier(0.25,0.1,0.25,1)
- ease-in 慢塊，等於 cubic-bezier(0.42,0,1,1)
- ease-out 塊慢，等於 cubic-bezier(0,0,0.58,1)
- ease-in-out 塊慢塊，等於 cubic-bezier(0.42,0,0.58,1)
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義自己的值。可能的值是 0 至 1 之間的數值。
- delay: 延遲
注意：當 property 為 all 的時候，為所有變動添加過渡
例如：transition: all 2s ease 0s;