今天給各位分享css3旋轉(zhuǎn)原點(diǎn)的知識(shí)，其中也會(huì)對(duì)css設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置進(jìn)行解釋?zhuān)绻芘銮山鉀Q你現(xiàn)在面臨的問(wèn)題，別忘了關(guān)注本站，現(xiàn)在開(kāi)始吧！

本文目錄一覽：

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

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

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

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

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

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

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

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

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

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

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

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

css3中怎樣定義動(dòng)畫(huà)的旋轉(zhuǎn)中心點(diǎn)

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

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

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

12.CSS3的Transform詳解

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

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

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

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