這篇文章要跟大家介紹的內容是關於CSS中transform-origin屬性是做什麼的？ transform-origin屬性的作用，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助
最近做的一個煙火動畫，就是煙火散開的動畫，在動畫的實現過程中，主要在煙火旋轉過程中卡住了，後來發現主要對transform-origin屬性理解不深，特地找了個例子來練習，加深了對屬性的理解。
transform-origin作用這個屬性是用來改變元素變形的原點，一般用來配合旋轉來使用最多。接收參數可為一個、兩個、三個。當為兩個值，分別代表距離盒模型左側的值，如transform-origin: 50px 50px;，表示該容器的旋轉中心變成以盒子模型左上角為原點，X和Y軸距離50px為原點進行旋轉。
#中間那個豎條為我們最初始設定的，後面的都基於此進行旋轉
<p> </p><p></p> <p></p> <p></p> <p></p> <p></p>
從下面的CSS程式碼可以看出，我們設定了旋轉中心為第一個垂直線的(3,105)px為原點進行旋轉，這裡的距離為距離盒模型左側的值，理解這一點，就可以寫出其他的時針了，然後分別旋轉即可得到時針。由於不理解這裡的取值時相對於哪個位置進行計算的，因而踩了不少的坑。
CSS
.hour {
position: absolute;
left: 105px;
width: 6px;
height: 50px;
background-color: #000;
border-radius:6px;
-webkit-transform-origin:3px 105px;
transform-origin:3px 105px;
}
.hour:nth-child(2) {
transform:rotate(45deg);
}
.hour:nth-child(3) {
transform:rotate(90deg);
}
.hour:nth-child(4) {
transform:rotate(-45deg);
}
.hour:nth-child(5) {
transform:rotate(-90deg);
}相關推薦：
CSS是什麼？ css層疊樣式的介紹（程式碼）以上是CSS中transform-origin屬性是做什麼的？ transform-origin屬性的作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
