CSS中transform-origin屬性的作用是什么-創(chuàng)新互聯(lián)

從下面的CSS代碼可以看出，我們設(shè)置了旋轉(zhuǎn)中心為第一個豎線的(3,105)px為原點(diǎn)進(jìn)行旋轉(zhuǎn)，這里的距離為距離盒模型左側(cè)的值，理解這一點(diǎn)，就可以寫出其他的時(shí)針了，然后分別旋轉(zhuǎn)即可得到時(shí)針。由于不理解這里的取值時(shí)相對于哪個位置進(jìn)行計(jì)算的，因而踩了不少的坑。

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是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，主要是用來設(shè)計(jì)網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

看完上述內(nèi)容，你們掌握CSS 中transform-origin屬性的作用是什么的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

<cite id="2qycw"></cite>