如何運用CSS創建旋轉動畫效果

一、基本屬性

CSS中，旋轉動畫主要通過transform屬性實現。其中，rotate()函數可以將元素旋轉一定的角度，可以接收正負值。

例如，以下代碼實現了一個正方形元素以中心為軸旋轉45度：

.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transform: rotate(45deg);
}

二、過渡效果

如果需要讓元素實現平滑旋轉，可以結合使用transition屬性和rotate()函數。

例如，以下代碼實現了一個正方形元素以中心為軸平滑旋轉45度：

.square {
  width: 100px;
  height: 100px;
  background-color: #ff0000;
  transition: transform 1s ease;
}

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

三、關鍵幀動畫

如果需要實現更為複雜的旋轉動畫，可以使用CSS中的關鍵幀動畫（@keyframes）。

例如，以下代碼實現了一個沿著圓周軌跡旋轉的圓形元素：

.circle {
  width: 50px;
  height: 50px;
  background-color: #00ff00;
  position: absolute;
  top: 50%;
  left: 50%;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -120%) rotate(0deg) translate(0, 120%);
  }
  100% {
    transform: translate(-50%, -120%) rotate(360deg) translate(0, 120%);
  }
}

四、3D旋轉

CSS中，還可以使用rotateX()、rotateY()和rotateZ()函數實現沿著不同軸的3D旋轉效果。

例如，以下代碼實現了一個以Y軸為軸旋轉的3D立方體：

.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 2s linear infinite;
}

.cube .face {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #ff0000;
  opacity: 0.7;
  border: 1px solid #000;
}

.cube .face.front {
  transform: translateZ(50px);
}

.cube .face.back {
  transform: translateZ(-50px) rotateY(180deg);
}

.cube .face.left {
  transform: rotateY(-90deg) translateX(-50px);
}

.cube .face.right {
  transform: rotateY(90deg) translateX(50px);
}

.cube .face.top {
  transform: rotateX(90deg) translateY(-50px);
}

.cube .face.bottom {
  transform: rotateX(-90deg) translateY(50px);
}

@keyframes rotate {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

五、總結

CSS的旋轉動畫是實現動態效果的有效工具之一。可以通過基本的屬性、過渡效果、關鍵幀動畫和3D旋轉等方法，實現不同類型和複雜程度的效果。在實際應用中，還可以結合JavaScript等技術實現更為精細的交互效果和自定義動畫。