今天給各位分享css3旋轉(zhuǎn)原點的知識，其中也會對css設(shè)置旋轉(zhuǎn)元素的基點位置進(jìn)行解釋，如果能碰巧解決你現(xiàn)在面臨的問題，別忘了關(guān)注本站，現(xiàn)在開始吧！

本文目錄一覽：

• 1、css3圓環(huán)旋轉(zhuǎn)效果動畫怎么做
• 2、CSS3函數(shù)rotate()怎么使用
• 3、css3中怎樣定義動畫的旋轉(zhuǎn)中心點
• 4、12.CSS3的Transform詳解

css3圓環(huán)旋轉(zhuǎn)效果動畫怎么做

首先我們需要使用div畫出這8個圖標(biāo)，我們通過觀察可以發(fā)現(xiàn)，8個圖標(biāo)可以分成4組div，并且可以將圓形等分為8份，這樣可以方便我們隨后的操作。

實現(xiàn)如圖所示的動畫效果：預(yù)載動畫一：雙旋圈在兩個不同方向旋轉(zhuǎn)的圓圈。我們對內(nèi)圈的轉(zhuǎn)速定義了一個CSS代碼，即內(nèi)圈比外圈的速率快2倍。

這篇文章通過實例代碼給大家主要介紹了，如何利用CSS3實現(xiàn)同時執(zhí)行傾斜和旋轉(zhuǎn)的動畫效果，文中給出了完整的實例代碼，大家直接運行就可以看到效果，有需要的朋友們可以參考借鑒，下面來一起看看吧。

CSS3函數(shù)rotate()怎么使用

rotate()：旋轉(zhuǎn)元素對象。skew()：傾斜元素對象。

rotate：旋轉(zhuǎn)該元素，配合著transform-origin屬性，transform-origin 是設(shè)置旋轉(zhuǎn)點的。(沒有設(shè)置transform-origin 屬性也可以，只不過是根據(jù)該元素的中心點旋轉(zhuǎn)，也就是center center)加上 transform-origin 設(shè)置旋轉(zhuǎn)點。

允許負(fù)值，元素將逆時針旋轉(zhuǎn)rotate(30deg)表示旋轉(zhuǎn)30度matrix()方法skew(x-angle，y-angle)定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。

我們用兩個相同的div編輯它，這是基本的div代碼。這是一個沒有旋轉(zhuǎn)的div。然后我們只設(shè)置灰藍(lán)色div的旋轉(zhuǎn)，以便我們確切地知道旋轉(zhuǎn)中心點是什么。設(shè)置灰藍(lán)色div是使用.t類名，然后使用變換，然后旋轉(zhuǎn)。

接著通過輸入“border-radius：50%/50%”屬性，如下圖所示，將長方形圖層設(shè)置成一個橢圓形。接下來就是將橢圓旋轉(zhuǎn)了，用“transform：rotate(30deg)”將橢圓旋轉(zhuǎn)30度。

css3新增的一個控制元素旋轉(zhuǎn)屬性的函數(shù)是rotate()[不要懷疑，它的確是一個隱形的函數(shù)，他的使用很類似與js中的函數(shù)]。同之前所講過的translate和scale，他也分為2D和3D的旋轉(zhuǎn)，差別就是Z軸的旋轉(zhuǎn)。

css3中怎樣定義動畫的旋轉(zhuǎn)中心點

1、首先新建一個html5文檔，完成基本代碼編寫，如下圖所示。然后新建一個長100像素，高50像素背景為紅色的長方形圖層。接著通過輸入“border-radius：50%/50%”屬性，如下圖所示，將長方形圖層設(shè)置成一個橢圓形。

2、我們沒有使用transform-origin改變元素原點位置的情況下，CSS變形進(jìn)行的旋轉(zhuǎn)、移位、縮放等操作都是以元素自己中心（變形原點）位置進(jìn)行變形的。

3、使用transform-origin設(shè)置css3旋轉(zhuǎn)中心，分別有兩個參數(shù)，代表x和y軸的位置。旋轉(zhuǎn)參考的零點：元素左上角的位置或者說盒子模型的左上角。

12.CSS3的Transform詳解

translate()：移動元素對象。scale()：縮放元素對象。rotate()：旋轉(zhuǎn)元素對象。skew()：傾斜元素對象。

rotate：旋轉(zhuǎn)該元素，配合著transform-origin屬性，transform-origin 是設(shè)置旋轉(zhuǎn)點的。(沒有設(shè)置transform-origin 屬性也可以，只不過是根據(jù)該元素的中心點旋轉(zhuǎn)，也就是center center)加上 transform-origin 設(shè)置旋轉(zhuǎn)點。

允許負(fù)值，元素將逆時針旋轉(zhuǎn)rotate(30deg)表示旋轉(zhuǎn)30度matrix()方法skew(x-angle，y-angle)定義 2D 傾斜轉(zhuǎn)換，沿著 X 和 Y 軸。

關(guān)于css3旋轉(zhuǎn)原點和css設(shè)置旋轉(zhuǎn)元素的基點位置的介紹到此就結(jié)束了，不知道你從中找到你需要的信息了嗎 ？如果你還想了解更多這方面的信息，記得收藏關(guān)注本站。