CSS3 2D 轉換之旋轉

CSS3 2D轉換

• 轉換(transfrom)是CSS3中具有顛覆性的特征之一，可以實現元素的位移、旋轉、縮放等效果
• 轉換(transfrom)可以簡單的理解為變形
  • 移動:translate
  • 旋轉:rotate
  • 縮放:scale

CSS3 2D 轉換之旋轉rotate

• 2D旋轉指的是讓元素在二維平面內順時針旋轉或逆時針旋轉

• 語法

• transform:rotate(度數)

• 重點

  • rotate里面根度數，單位是deg(比如: rotate(45deg))
  • 角度為正時，順時針旋轉，角度為負時，逆時針旋轉
  • 默認旋轉的中心點是元素的中心點

• 下面我們來使一張圖片進行旋轉

img {
        width: 150px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin: -75px;
        transition: all 1.5s;
}

img:hover {
        transform: rotate(360deg);
 }

• 我們利用過渡加旋轉完成了一個圖片的順時針360°旋轉

2D轉換中心點

• transform-origin可以用來設置元素轉換的中心點

• 語法

  • transform-origin: x y;

• 重點

  • 注意后面的參數x和y用空格隔開
  • x y默認轉換的中心點是元素的中心點(50% 50%)
  • 還可以給x y 設置 像素 或者 方位名詞(top botton left center)
    • transform-origin: 50% 50%;等價於transform-origin: center center;
    • transform-origin: 40px 40px;可以是px 像素
    • transform-origin: left bottom;

• 下面我們來演示一下transform-origin: 40px 40px;

img {
           width: 150px;
           position: fixed;
           top: 50%;
           left: 50%;
           margin: -75px;
           transition: all 1.5s;
           transform-origin: 40px 40px;
       }

       img:hover {
           transform: rotate(360deg);
       }