css3屬性transform-origin屬性講解

transform是CSS3裏的變換屬性，經常使用的有translate（平移）、rotate（旋轉）、skew(傾斜)、scale(縮放)方法。而transform-origin並非transform的屬性值，其具備獨立的語法，但值得注意的是，transform-origin必須配合transform來使用，這個從名字也能夠看得出來，就是給transform設置的各類動做設置一個參考點。 默認狀況下，元素的動做參考點爲元素盒子的中心。transform能夠設置九個位置的值，水平方向有left | center | right 三個值，垂直方向也有三個，分別是 top | center |bottom ，故一共有九個。

語法：

transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?

• 默認值：50% 50%，效果等同於center center
• 適用於：全部塊級元素及某些內聯元素

取值：

• <percentage>：用百分比指定座標值。能夠爲負值。
• <length>：用長度值指定座標值。能夠爲負值。
• left：指定原點的橫座標爲left
• center①：指定原點的橫座標爲center
• right：指定原點的橫座標爲right
• top：指定原點的縱座標爲top
• center②：指定原點的縱座標爲center
• bottom：指定原點的縱座標爲bottom

說明：

• 設置或檢索對象以某個原點進行轉換。
• 該屬性提供2個參數值。
• 若是提供兩個，第一個用於橫座標，第二個用於縱座標。
• 若是隻提供一個，該值將用於橫座標；縱座標將默認爲50%。
• 對應的腳本特性爲transformOrigin。

兼容性：

transform屬性

默認狀況，變形的原點在元素的中心點，或者是元素X軸和Y軸的50%處，以下圖所示：

咱們沒有使用transform-origin改變元素原點位置的狀況下，CSS變形進行的旋轉、移位、縮放等操做都是以元素本身中心（變形原點）位置進行變形的。但不少時候須要在不一樣的位置對元素進行變形操做，咱們就可使用transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到須要的原點位置。

看上去transform-origin取值與background-position取值相似。爲了方便記憶，能夠把關鍵詞和百分比值對比起來記：

• 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%

爲了讓你們能一眼看明白，下面截圖以transform中的旋轉rotate()爲例，並transform-origin取值不同時的效果：
transform-origin取值爲center（或center center或50% 或50% 50%）：

transform-origin取值爲top（或top center或center top或50％ 0）：

transform-origin取值爲right(或right center 或center right 或 100％ 或 100％ 50％)：

transform-origin取值爲bottom(或bottom center 或center bottom 或 50％ 100％)：

transform-origin取值爲left(或left center或center left或0或0 50％):

transform-origin取值爲top left(或left top或0 0)：

transform-origin取值爲right top（或top right或100％ 0）：

transform-origin取值爲bottom right（或right bottom或100％ 100％）:

transform-origin取值爲left bottom（或bottom left 或 0 100％）:

參考文章：http://www.w3cplus.com/css3/t...

---

實例：擺動的小球（鐘擺效果）

從上圖中能夠看出，小球擺動效果運用了動畫原理，以及transform-origin原理（很重要）。首先，先肯定好球的變形中心點，而後在添加動畫效果。

原理圖：

<div class="sphere"></div>

.sphere {
    width: 60px;
    height: 60px;
    background: #9485FD;
    border-radius: 100%;
    margin: 280px auto;
    background: radial-gradient(circle at top center, #c6bff6, #6959d8, #372a91);
    transform-origin: center -200px;
    animation: clock 4s infinite linear;
    position: relative;
}

.sphere::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 200px;
    border-left: 1px #9485FD dashed;
}

@keyframes clock {
    0% {
        transform: rotate(0deg)
    }
    25% {
        transform: rotate(30deg)
    }
    50% {
        transform: rotate(0deg)
    }
    75% {
        transform: rotate(-30deg)
    }
    100% {
        transform: rotate(0deg)
    }
}