CSS transform-origin的理解

付永剛發布于2019-08-29 16:13 / 1322人閱讀

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

前言

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

transform-origin作用

這個屬性是用來改變元素變形的原點，一般用來配合旋轉來使用最多。接收參數可為一個、兩個、三個。當為兩個值，分別代表距離盒模型左側的值，如transform-origin: 50px 50px;，表示該容器的旋轉中心變為以盒模型左上角為原點，X和Y軸距離50px為原點進行旋轉。

時鐘時針的繪制

中間那個豎條為我們最初始設置的，后面的均基于此進行旋轉

從下面的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);
}

參考

MDN

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113604.html

巧妙使用transform實現環形路徑平移動畫

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

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

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

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

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

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

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

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

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

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