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

在CSS3中，我們可以通過(guò)設(shè)置transform-origin屬性來(lái)指定元素的旋轉(zhuǎn)中心點(diǎn)，該屬性接受兩個(gè)值，分別代表水平和垂直方向上的位置。

如果我們想要將元素旋轉(zhuǎn)的中心點(diǎn)設(shè)置在元素的中心，可以使用以下代碼：

.rotate-center {
  transform-origin: center center;
}

這將使元素在水平和垂直方向上同時(shí)旋轉(zhuǎn)，如果我們只想在水平方向上旋轉(zhuǎn)，可以將垂直位置設(shè)置為top或bottom：

.rotate-horizontal {
  transform-origin: center top;
}

相反，如果我們只想在垂直方向上旋轉(zhuǎn)，可以將水平位置設(shè)置為left或right：

.rotate-vertical {
  transform-origin: left center;
}

我們還可以使用具體的像素值來(lái)設(shè)置旋轉(zhuǎn)中心點(diǎn)：

.rotate-specific {
  transform-origin: 50px 50px;
}

這將使元素在水平和垂直方向上同時(shí)旋轉(zhuǎn)，但旋轉(zhuǎn)的中心點(diǎn)將位于元素的中心位置，注意，這里的50px只是一個(gè)示例值，你可以根據(jù)需要設(shè)置為任何你想要的像素值。