css3屬性transform-origin怎么用

這篇文章主要為大家展示了“css3屬性transform-origin怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“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％）:

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

　　從上圖中可以看出，小球擺動效果運用了動畫原理，以及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)

　　}

　　}

以上是“css3屬性transform-origin怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！