【CSS3】CSS3 2D 转换 - rotate 旋转 ( transform: rotate(90deg) 旋转样式 | transition 过度效果设置 )

在CSS3中，我们可以使用transform属性的rotate()函数来实现元素的旋转效果。rotate()函数可以指定旋转的角度，其值可以是度（deg）或弧度（rad）。

以下是一些使用CSS3 rotate 旋转样式的示例：

1. 旋转一个元素90度：

div {
  transform: rotate(90deg);
}

2. 旋转一个元素-90度（即逆时针旋转90度）：

div {
  transform: rotate(-90deg);
}

3. 旋转一个元素180度（即360度，或者可以说是180度的两倍，因为我们是在一个完整的圆环中计算）：

div {
  transform: rotate(360deg); /* 或者 transform: rotate(180deg); */
}

4. 使用旋转中心点（默认情况下，旋转中心点是元素的中心，但我们可以通过transform-origin属性来改变它）：

div {
  transform-origin: top left; /* 或者 bottom right, center等等 */
  transform: rotate(90deg);
}

5. 使用动画来实现连续旋转（例如，旋转一个元素直到它消失）：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
 
div {
  animation: spin 2s linear infinite;
}

以上代码展示了如何使用CSS3的rotate函数来实现2D旋转效果，并提供了一些如何改变旋转中心点和使用动画的例子。