CSS 中transform-origin屬性的作用是什么？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：國際域名空間、網(wǎng)站空間、營銷軟件、網(wǎng)站建設(shè)、阜新網(wǎng)站維護(hù)、網(wǎng)站推廣。

transform-origin作用

這個屬性是用來改變元素變形的原點，一般用來配合旋轉(zhuǎn)來使用最多。接收參數(shù)可為一個、兩個、三個。當(dāng)為兩個值，分別代表距離盒模型左側(cè)的值，如transform-origin: 50px 50px;，表示該容器的旋轉(zhuǎn)中心變?yōu)橐院心Ｐ妥笊辖菫樵c，X和Y軸距離50px為原點進(jìn)行旋轉(zhuǎn)。

時鐘時針的繪制

中間那個豎條為我們最初始設(shè)置的，后面的均基于此進(jìn)行旋轉(zhuǎn)

  <div class="clock">
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
    <div class="hour"></div>
  </div>

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

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等文件樣式的計算機語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實現(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è)資訊頻道，感謝各位的閱讀！

新聞標(biāo)題：CSS中transform-origin屬性的作用是什么
文章URL：http://www.yijiale78.com/article0/gceooo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站設(shè)計、小程序開發(fā)、外貿(mào)建站、定制網(wǎng)站、App設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)