CSS旋轉(zhuǎn)正方形的技巧與實現(xiàn)

在CSS中，我們可以使用transform屬性來旋轉(zhuǎn)元素，下面是一個簡單的例子，展示了如何旋轉(zhuǎn)一個正方形。

HTML結(jié)構(gòu)：

<div class="square"></div>

CSS樣式：

.square {
  width: 100px;
  height: 100px;
  background-color: #000;
  position: relative;
}

我們將使用CSS的transform屬性來旋轉(zhuǎn)這個正方形，如果我們想要旋轉(zhuǎn)45度，我們可以這樣寫：

.square {
  transform: rotate(45deg);
}

這將使正方形旋轉(zhuǎn)45度，你可以根據(jù)需要調(diào)整這個角度，如果你想要旋轉(zhuǎn)的方向不同，你可以使用transform-origin屬性來調(diào)整旋轉(zhuǎn)的中心點。

.square {
  transform: rotate(45deg);
  transform-origin: top left;
}