在CSS中，我們可以通過rotate()函數對元素進行旋轉。但是，如果我們想要讓元素繞某個點旋轉，該如何實現呢？這就需要用到CSS3中的transform-origin屬性。
transform-origin: x-axis y-axis z-axis;
transform-origin屬性用于設置旋轉或縮放元素時的基準點。其中，x-axis、y-axis、z-axis可以是以下幾種值：
- left
- center
- right
- top
- bottom
- 長度值（如50px）
- 百分比值（如50%）
默認情況下，transform-origin的值為50% 50% 0，即元素的中心點。
下面是一個繞某點旋轉的例子：
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width: 100px;
height: 100px;
margin: 50px auto;
background-color: red;
animation: rotation 5s linear infinite;
transform-origin: 50% 0;
}
@keyframes rotation{
100%{
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>該例子中，box元素繞其頂部中心點旋轉。關鍵代碼如下：
.box{
/* 省略其他樣式 */
transform-origin: 50% 0;
}transform-origin的值為50% 0，表示元素的旋轉基準點在其寬度中心點和頂部（即y軸方向上的0點）。
在CSS中，我們可以通過transform-origin屬性實現元素的繞某一點旋轉。這種方法為我們的網頁增添了更多的視覺效果，為用戶帶來更好的瀏覽體驗。
下一篇mysql安裝一直轉圈