CSS transform-origin的理解

付永剛發(fā)布于2019-08-29 16:13 / 1326人閱讀

摘要：前言最近做的一個(gè)煙花動(dòng)畫，就是煙花散開的動(dòng)畫，在動(dòng)畫的實(shí)現(xiàn)過(guò)程中，主要在煙花旋轉(zhuǎn)過(guò)程中卡住了，后來(lái)發(fā)現(xiàn)主要對(duì)屬性理解不深，特地找了個(gè)例子來(lái)練習(xí)，加深了對(duì)屬性的理解。

前言

最近做的一個(gè)煙花動(dòng)畫，就是煙花散開的動(dòng)畫，在動(dòng)畫的實(shí)現(xiàn)過(guò)程中，主要在煙花旋轉(zhuǎn)過(guò)程中卡住了，后來(lái)發(fā)現(xiàn)主要對(duì)transform-origin屬性理解不深，特地找了個(gè)例子來(lái)練習(xí)，加深了對(duì)屬性的理解。

transform-origin作用

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

時(shí)鐘時(shí)針的繪制

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

從下面的CSS代碼可以看出，我們?cè)O(shè)置了旋轉(zhuǎn)中心為第一個(gè)豎線的(3,105)px為原點(diǎn)進(jìn)行旋轉(zhuǎn)，這里的距離為距離盒模型左側(cè)的值，理解這一點(diǎn)，就可以寫出其他的時(shí)針了，然后分別旋轉(zhuǎn)即可得到時(shí)針。由于不理解這里的取值時(shí)相對(duì)于哪個(gè)位置進(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);
}

參考

MDN

GPU云服務(wù)器云服務(wù)器 transform-origin 云計(jì)算的理解 cdn的理解對(duì)大數(shù)據(jù)的理解

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113604.html

相關(guān)文章

巧妙使用transform實(shí)現(xiàn)環(huán)形路徑平移動(dòng)畫

摘要：參考環(huán)形路徑平移的方案，做一些調(diào)整，就可以得到型路徑平移的寫法這里初始把元素放在了上面那個(gè)半圓環(huán)的圓心，然后在的關(guān)鍵幀位置切換為下面的半圓環(huán)路徑。最近在CSS Secrets一書看到了這樣一節(jié)：讓一個(gè)元素沿環(huán)形路徑平移。這是一個(gè)css動(dòng)畫的問(wèn)題，但卻沒有看上去那么簡(jiǎn)單，其關(guān)鍵點(diǎn)是元素是平移的，也就是說(shuō)，元素自身并不發(fā)生旋轉(zhuǎn)，只是穩(wěn)定地沿著一個(gè)環(huán)形的路徑移動(dòng)，像這樣： showImg(...

KevinYan 2019-08-29 11:31 評(píng)論0 收藏0
CSS3 變換

摘要：概覽變換也叫轉(zhuǎn)換，主要包括以下幾種旋轉(zhuǎn)扭曲縮放和移動(dòng)以及矩陣變形。變換沒有扭曲操作，有移動(dòng)，旋轉(zhuǎn)，縮放。三，取消的變換，將變換應(yīng)用到上并置于縮放前，改變縮放值，沒有任何變化。概覽 CSS3 變換也叫 2D/3D轉(zhuǎn)換，主要包括以下幾種：旋轉(zhuǎn)(rotate) 、扭曲 (skew) 、縮放(scale) 和移動(dòng)(translate) 以及矩陣變形(matrix) 。transform ...

wayneli 2019-08-28 18:22 評(píng)論0 收藏0
玩轉(zhuǎn)CSS 3D -正四面體與正六面體

摘要：簡(jiǎn)單來(lái)說(shuō)，就是非常對(duì)稱的立方體，而且每一個(gè)面都是由正多邊形組成，因此在這一篇，將會(huì)畫出正四面體正六面體。完成之后應(yīng)該就會(huì)順利地看到一個(gè)正六面體，這時(shí)候我們可以改變的，可以更加清楚。我們理解了CSS 3D的個(gè)中原理之后，廢話就不用多說(shuō)，直接來(lái)畫正多面體吧！只要正多面體可以畫出來(lái)，基本上在CSS 3D的領(lǐng)域里，大概就沒甚么難得倒我們了。首先看一下百度百科對(duì)于正多面體的介紹：多面體，或稱...

Kross 2019-08-02 16:14 評(píng)論0 收藏0
玩轉(zhuǎn)CSS 3D -正四面體與正六面體

摘要：簡(jiǎn)單來(lái)說(shuō)，就是非常對(duì)稱的立方體，而且每一個(gè)面都是由正多邊形組成，因此在這一篇，將會(huì)畫出正四面體正六面體。完成之后應(yīng)該就會(huì)順利地看到一個(gè)正六面體，這時(shí)候我們可以改變的，可以更加清楚。我們理解了CSS 3D的個(gè)中原理之后，廢話就不用多說(shuō)，直接來(lái)畫正多面體吧！只要正多面體可以畫出來(lái)，基本上在CSS 3D的領(lǐng)域里，大概就沒甚么難得倒我們了。首先看一下百度百科對(duì)于正多面體的介紹：多面體，或稱...

doodlewind 2019-08-29 18:39 評(píng)論0 收藏0
css 3D動(dòng)畫

摘要：無(wú)非就是通過(guò)軸來(lái)進(jìn)行操作可以幫助理解三維坐標(biāo)則可以幫你理解透視位置。我們成為基點(diǎn)在水平方向改變觀看的位置縮放旋轉(zhuǎn)移動(dòng)傾斜通過(guò)這些來(lái)進(jìn)行效果代碼如下正方體代碼如下星球持續(xù)更新，歡迎大家收藏指教一、今天讓我們來(lái)學(xué)習(xí)一下css 3D吧！ 1.首先我們要學(xué)習(xí)好css3 3d一定要有一定的立體感！ 2.再來(lái)那就聊聊原理吧！ 3.css3 3d 顧名思義是由兩個(gè)2d名片組成的但不是讓你建立連個(gè)...

Taonce 2019-08-29 16:22 評(píng)論0 收藏0