CSS實(shí)現(xiàn)盒子轉(zhuǎn)動(dòng)

在CSS中，我們可以使用transform屬性來實(shí)現(xiàn)盒子的轉(zhuǎn)動(dòng)。transform屬性允許我們對(duì)元素進(jìn)行2D或3D轉(zhuǎn)換，包括旋轉(zhuǎn)、縮放、移動(dòng)和傾斜等操作。

要實(shí)現(xiàn)盒子的轉(zhuǎn)動(dòng)，我們可以使用transform屬性中的rotate函數(shù)，它可以將元素旋轉(zhuǎn)指定的角度，我們可以將盒子旋轉(zhuǎn)90度，使其橫向顯示：

.box {
  transform: rotate(90deg);
}

除了旋轉(zhuǎn)90度，我們還可以旋轉(zhuǎn)其他角度，例如45度、180度等，我們還可以使用transition屬性來添加過渡效果，使盒子的旋轉(zhuǎn)更加平滑：

.box {
  transform: rotate(90deg);
  transition: transform 2s;
}

上述代碼將盒子旋轉(zhuǎn)90度，并添加了一個(gè)2秒的過渡效果，使旋轉(zhuǎn)更加平滑。

除了旋轉(zhuǎn)效果，我們還可以使用transform屬性來實(shí)現(xiàn)其他效果，例如縮放、移動(dòng)和傾斜等，這些效果可以與其他屬性組合使用，以創(chuàng)建更加豐富的動(dòng)畫效果。

CSS中的transform屬性為我們提供了強(qiáng)大的盒子轉(zhuǎn)動(dòng)功能，使我們可以輕松地實(shí)現(xiàn)各種旋轉(zhuǎn)、縮放、移動(dòng)和傾斜效果。