transform函數可以讓物件進行，移動或放大等操作，透過transform:來使用
transform: translateX(數值)，物件往右方向移動，如果數值會負數會變成向左移動
transform:translateY(數值)，物件往下方移動，如果數值是負數，變成往上移動
transform:translate(x方向,y方向)透過translate可以合併兩者，移動方式會變成往右上，右下，左下，或左上，如果其中一個設0，就變成正常的translateY或translateX

div {
            width: 100px;
            height: 100px;
            background-color: rgb(0,154,255);
            color: #ff00a6;
            transition: all 1s 0.2ms;
            border: 1px solid black;
            align-items: center;
            display: inline-block;
            margin: 1vw;
        }
.box{width:100vw; background-color: skyblue;height:70vh;}
.box:hover{background-color: skyblue;}
.box:hover div{
            background-color: yellow;
            border: 1px double violet;
        }
.box:hover .div1{

            transform: translateX(200px);
        }
.box:hover .div2{
            transform: translateX(-200px);
            
        }
.box:hover .div3{
            transform: translateY(200px);
        }
.box:hover .div4{
           transform: translateY(-200px);
        }
.box:hover .div5{
           transform: translate(200px, 200px);
        }

    <div class="box">
        <div class="div1">
          translateX(200px);
        </div>
        <div class="div2">
          translateX(-200px);
        </div>
        <div class="div3">
          translateY(200px);
        </div>
        <div class="div4">
         translateY(-200px);
        </div>
        <div class="div5">
          translate(200px, -200px);
        </div>
    </div>

透過給父容器hover來讓全部一起移動，不然transform會改變物件位置，如果單給各個物件hover可能會有重複判定，導致不斷抖動的問題

scale-x:左右縮放
scale-y:上下縮放
scale:等比放大

.box:hover .div1{transform:scaleX(1.5);}
.box:hover .div2{transform: scaleY(1.5);}
.box:hover .div3{transform: scaleX(-0.5);}
.box:hover .div4{transform: scaleY(0.5);}
.box:hover .div5{transform: scale(1.5);}

scale以比例來放大或縮小，1是原比例，1.5就是放大1.5倍,0.5縮小0.5倍,如果加負數會反轉

rotate，旋轉，rotate的使用單位是deg，表示角度的意思，360是轉一圈，
rotate-x:上下翻轉
rotate-y:左右翻轉
rotate:旋轉，正常是順時針轉，如果加負數就變逆時針轉

.box:hover .div1{transform:rotate(720deg);}
.box:hover .div2{transform: rotate(-720deg);}
.box:hover .div3{transform:rotateX(720deg)}
.box:hover .div4{transform: rotateY(720deg);}