本文目錄導(dǎo)讀：

1. 旋轉(zhuǎn)中心點(diǎn)的基本語法
2. 旋轉(zhuǎn)中心點(diǎn)的默認(rèn)值
3. 旋轉(zhuǎn)中心點(diǎn)的設(shè)置示例
4. 旋轉(zhuǎn)中心點(diǎn)的百分比設(shè)置

CSS3旋轉(zhuǎn)中心點(diǎn)詳解

在CSS3中，我們可以使用transform屬性來實(shí)現(xiàn)元素的旋轉(zhuǎn)，而旋轉(zhuǎn)的中心點(diǎn)可以通過transform-origin屬性來指定。

旋轉(zhuǎn)中心點(diǎn)的基本語法

transform-origin屬性的基本語法是：

transform-origin: x y;

x和y分別表示旋轉(zhuǎn)中心點(diǎn)的橫坐標(biāo)和縱坐標(biāo)，它們可以是具體的像素值，也可以是百分比。

旋轉(zhuǎn)中心點(diǎn)的默認(rèn)值

如果沒有指定transform-origin屬性，那么旋轉(zhuǎn)的默認(rèn)中心點(diǎn)是元素的中心，對(duì)于一個(gè)寬度為200px、高度為100px的div元素，默認(rèn)旋轉(zhuǎn)中心點(diǎn)是(100px, 50px)。

旋轉(zhuǎn)中心點(diǎn)的設(shè)置示例

我們可以通過設(shè)置transform-origin屬性來改變旋轉(zhuǎn)的中心點(diǎn)，將上述div元素的旋轉(zhuǎn)中心點(diǎn)設(shè)置為左上角，可以這樣做：

div {
  transform-origin: 0 0;
}

這樣，旋轉(zhuǎn)的中心點(diǎn)就會(huì)變?yōu)?0px, 0px)，即元素的左上角。

旋轉(zhuǎn)中心點(diǎn)的百分比設(shè)置

除了像素值外，我們還可以使用百分比來設(shè)置旋轉(zhuǎn)的中心點(diǎn)，將上述div元素的旋轉(zhuǎn)中心點(diǎn)設(shè)置為寬度的50%、高度的25%，可以這樣做：

div {
  transform-origin: 50% 25%;
}

這樣，旋轉(zhuǎn)的中心點(diǎn)就會(huì)變?yōu)?100px, 25px)。

通過transform-origin屬性，我們可以輕松地改變CSS3中元素的旋轉(zhuǎn)中心點(diǎn)，無論是使用像素值還是百分比，都可以輕松實(shí)現(xiàn)這一功能。