CSS transform-origin的理解

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

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

前言

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

transform-origin作用

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

時鐘時針的繪制

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

從下面的CSS代碼可以看出，我們設(shè)置了旋轉(zhuǎn)中心為第一個豎線的(3,105)px為原點進行旋轉(zhuǎn)，這里的距離為距離盒模型左側(cè)的值，理解這一點，就可以寫出其他的時針了，然后分別旋轉(zhuǎ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);
}

參考

MDN

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/113604.html

相關(guān)文章

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

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

KevinYan 2019-08-29 11:31 評論0 收藏0
CSS3 變換

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

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

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

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

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

doodlewind 2019-08-29 18:39 評論0 收藏0
css 3D動畫

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

Taonce 2019-08-29 16:22 評論0 收藏0