transform樣式詳解

transform--2d變換，不會對佈局產生任何影響

物體位置偏移的方法：

方法一：
top:100px;
left:100px;
方法二:
position:absolute;
top:100px;
left:100px;
right:100px;
bottom:100px;
方法三：
transform:translate(x,y);/*能夠爲px,也能夠爲%，即爲自身的%數*/

變形主體:頁面中的盒子

方式:旋轉,平移,拉伸,壓縮,傾斜

過渡transition和2d變化transform本質區別

transition:描述了物體在變化過程當中的方式
transform：描述了物體形變的結果

transform:translate 偏移

寫法注意點：

.min {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translate(-50%,-50%);
            transform: translateY(200px) translateX(300px);
            /*此方法能夠向x偏移300,y200*/

.min {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translateY(200px);
            transform: translateX(300px);/*此寫法會覆蓋上面的屬性，只會偏移x300*/

.min {
            width: 200px;
            height: 200px;+
            
            background-color: skyblue;
            transform:translateX(300px) translateX(200px);/*此寫法會疊加屬性，會偏移x500*/

.min {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            transform: translate(50%,50%);/*偏移100px 100px*/
        }