CSS旋轉(zhuǎn)固定角動(dòng)的方法

在CSS中，我們可以使用transform屬性來實(shí)現(xiàn)元素的旋轉(zhuǎn)，如果我們想要固定一個(gè)角動(dòng)，讓元素在旋轉(zhuǎn)后仍然保持一定的角度，那么我們需要使用transform-origin屬性來指定旋轉(zhuǎn)的中心點(diǎn)。

下面是一個(gè)示例代碼，展示如何固定一個(gè)角動(dòng)：

<div class="rotate-box">
  <div class="rotate-inner">
    我是一個(gè)需要旋轉(zhuǎn)的元素
  </div>
</div>

.rotate-box {
  width: 200px;
  height: 200px;
  position: relative;
}
.rotate-inner {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 50px;
  transform: rotate(45deg); /* 旋轉(zhuǎn)45度 */
  transform-origin: top left; /* 旋轉(zhuǎn)中心點(diǎn)是左上角 */
}

在這個(gè)示例中，.rotate-inner元素會圍繞其左上角的點(diǎn)（transform-origin: top left;）進(jìn)行旋轉(zhuǎn)，無論頁面如何滾動(dòng)，它都會保持與視口的相對位置不變，這樣，我們就可以實(shí)現(xiàn)元素的固定角動(dòng)效果。