※ transform變形的屬性：
※ 建立transform專案：
※ transform範例：
index.html：
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
style.css：
.wrapper {成果顯示：
border: 2px solid #000;
height: 600px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
}
position：absolute
.wrapper {
/* box參考點 */
position: relative;
}
.box {
/* position */
position: absolute;
left: 100px;
top: 100px;
}
成果顯示：
※ 變形屬性：
translate:水平或是垂直的偏移。X軸是向右為正，Y軸是向下為正。
讓元件往右下方向走：position和transform比較
- position：會有一個相對的參考點的定位方式。
- transform：針對元素本身的去做移動的變形。
position和transform百分比比較：
transform：百分比是依照元素本身，也就是box本身的寬和高。就是向右100%乘以自己的寬；向下100%乘以自己的高。
.box {
/* 變形屬性 */
/* 讓元件往右下方向走 */
transform: translate(100%, 100%);}
成果顯示：
position：參考值是它上一層的元素，也就是wrapper的寬和高
.box {
/* position 讓元件往右下方向走*/
position: absolute;
left: 100%;
top: 100%;
}
成果顯示：
rotate:旋轉。單位是角度（degree）。
transform: rotate(45deg);
成果顯示：
skew:傾斜。單位是角度（degree）。
transform: skew(45deg);
成果顯示：
scale:放大或縮小倍率。（）：裡面填的是數值，表示要放大或縮小的倍率。
transform: scale(2);
成果顯示：
※ transform、position 置中方式 ：
position:讓紅框的左上角原點落在畫面中央。
.box {
/* transform、position 置中方式 */
position: absolute
left: 50%;
top: 50%;
}
成果顯示：
transform:讓紅框落在畫面中央。
.box {
/* position */
position: absolute
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
成果顯示：
好處：
- 完美置中：使用 transform: translate(-50%, -50%) 搭配 position: absolute 或 fixed，能讓元素以自身尺寸為基準精確地置中，不受父容器尺寸限制。
- 不受內容大小影響：無論元素本身是動態寬高、文字多寡、圖片尺寸如何，都可以自動適應並保持置中。
- 避免 margin 計算：不需事先知道元素尺寸，不用計算 margin 置中，對於響應式設計相當有幫助。
