CSS3 定義動畫的旋轉中心點

如果我們不使用 transform-origin 來改變元素原點的位置，則 CSS 變形執行的旋轉、移位和縮放操作都會在元素自身中心的位置（變形原點）處變形。 但是很多時候我們需要在不同的位置對元素進行變形，所以我們可以使用transform-origin來改變元素的原點位置，使元素的原點不在元素的中心，從而達到所需的原點位置。 如果我們將元素的變換原點設定為 0（x） 0（y），則元素的變換原點將轉換為元素的左上角。

更改 transform-origin 屬性的 x 軸和 y 軸值可以重置元素變形的原點位置，其基本語法如下，屬性值可以是 percentage、em、px 等特定值，也可以是 top、right、bottom、left、center 等關鍵字。 二維變形中的變換原點屬性可以是單個引數值，也可以是兩個引數值。 如果有兩個引數值，則第乙個值用於設定水平 x 軸的位置，第二個值用於設定垂直 y 軸的位置。

3D 變形中的 transform-origin 屬性還包括 z 軸的第三個值。 下表描述了每個值的值：x-offset：

它用於設定變換原點的水平 x 軸的偏移量，可以是總和值、正值（從中心點向右的水平 x 軸偏移量）或負值（從中心點向左的水平 x 軸偏移量）。 offset-keyword：是 top、right、bottom、left 或 center 中的關鍵字，可用於設定 transform-origin 的偏移量。

y-offset：用於設定垂直 y 軸上變換原點屬性的偏移量，該值可以是總和值，可以是正值（從中心點沿垂直 y 軸向下的偏移量）或負值（從中心點沿垂直 y 軸的偏移量）。 x-offset-keyword：

是位於 left、right 或 center 中的關鍵字，可用於設定 transform-origin 屬性值在水平 x 軸上的偏移量。 y-offset-keyword：是位於頂部、底部或中心的關鍵字，可用於設定 transform-origin 屬性值在垂直 y 軸上的偏移量。

z-offset：用於設定變換原點在3D變形中離使用者眼睛視點的距離，預設值為z=0，其值為OK，但這裡無效。

divtransform: rotate(45deg);

transform-origin:20% 40%;定義動畫的旋轉中心點

ms-transform: rotate(45deg); /* ie 9 */

ms-transform-origin:20% 40%; /* ie 9 */

webkit-transform: rotate(45deg);Safari 和 Chrome

webkit-transform-origin:20% 40%;Safari 和 Chrome

moz-transform: rotate(45deg); /* firefox */

moz-transform-origin:20% 40%; /* firefox */

o-transform: rotate(45deg); /* opera */

o-transform-origin:20% 40%; /* opera */

transform-origin: x-axis y-axis z-axis;值說明。

x-axis

定義檢視在 x 軸上的放置位置。 可能的值：

left center

rightlength

y-axis

定義檢視在 y 軸上的放置位置。 可能的值：

top center

bottom

length

z-axis

定義檢視在 z 軸上的放置位置。 可能的值：

length

執行此段落並除錯每個屬性的值以了解。

1. 首先，建立乙個新的HTML5文件，完成基本的**寫作，如下圖所示。

2. 然後建立乙個長度為 100 畫素、高度為 50 畫素、紅色背景的新矩形圖層。

3. 然後通過輸入“border-radius：50% 50%”屬性將矩形圖層設定為橢圓，如下圖所示。

4.下一步是旋轉橢圓，並使用“transform：rotate（30deg）”將橢圓旋轉30度。

5.這樣，用CSS3旋轉橢圓，預覽完成，如下圖所示。

活動作品報名表切換如何實現乙個網頁登入？ 14分鐘帶你使用CSS+JS實現炫酷的滑動切換效果。

1. 首先，建立乙個新的 HTML 空白文件，命名為 CSS3 animation，並儲存它。

2.然後編寫HTML結構，只需要乙個div元素，類名為img

3.將邊框設定為不同的顏色，並將邊框的寬度設定為100px。

4. 因為是圓環，我們用了CSS3的圓角效果，把圓角設定為50%，也就是邊框半徑：50%，看一下效果。

5.下一步是關鍵步驟，也恰好遊戲是新增動畫效果。 輸入以下內容。

6.我們來看看最終的效果，還是不錯的。

有邏輯地提問，把需求描述清楚，把無法用語言表達的圖片搭配好，否則別人就不知道你想要什麼。

首先：軸向。

有 3 個：x、y、z 三個，都可以理解為某個方向的中心，你想圍繞哪個根旋轉？

您想在全域性軸上向上旋轉還是在區域性軸上向上旋轉，還是在全域性軸和區域性軸上同時旋轉？

如果你想旋轉一切，就像地球在旋轉一樣。

旋轉，所以當你旋轉時，方向與旋轉相同，還是相反或隨機？

如果問題描述不明確，有很多可能性，如果你問：

動畫就足夠了。

首先給乙個帶有 div 的名稱。 比如。

然後使用 CSS 來定義你所做的運動框架。

第二個：15 秒是你做這個動畫，做 15 秒，你決定。

第三：4是次數。 如果無限迴圈與無窮大king

然後我做了練習，但是有很多人完成了它，不知道為什麼他們不能動。 因為很多人不記得給自己起名字，比如開始

keyframes start

設定 ritatez 的值就可以了。