css旋转90度

CSS旋转90度

在CSS中实现元素旋转90度，可以通过使用transform属性中的rotate()函数来轻松实现。其基本语法为：transform: rotate(90deg);。下面将如何通过不同的方法实现这一效果，并提供代码示例。

方法一：直接使用rotate()函数

最简单的实现方式就是直接使用CSS的transform属性中的rotate()函数。该函数接收一个角度参数，可以是正值（顺时针旋转）或负值（逆时针旋转）。

css
/* HTML */</p>

<div class="rotate-element">旋转文本</div>

<p>/* CSS <em>/
.rotate-element {
  transform: rotate(90deg); /</em> 顺时针旋转90度 */
}

这段代码会使得带有.rotate-element类的元素顺时针旋转90度。

方法二：结合transition实现平滑旋转

如果想要让旋转过程更加流畅，可以结合transition属性来实现平滑的旋转动画。

css
/* HTML */</p>

<div class="smooth-rotate">悬浮后旋转</div>

<p>/* CSS <em>/
.smooth-rotate {
  transition: transform 0.5s ease; /</em> 设置过渡效果 */
}</p>

<p>.smooth-rotate.hovered {
  transform: rotate(90deg); /* 鼠标悬停时旋转90度 */
}

在这个例子中，当鼠标悬停在元素上时，它会平滑地旋转到90度的位置。

方法三：使用keyframes制作循环旋转动画

如果希望元素持续不断地旋转，可以使用@keyframes规则创建动画。

css
/* HTML */</p>

<div class="loop-rotate">持续旋转</div>

<p>/* CSS */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}</p>

<p>.loop-rotate {
  animation: spin 4s linear infinite; /* 持续旋转动画 */
}

这里定义了一个名为spin的关键帧动画，使元素从0度开始旋转至360度，即完成一次完整的旋转。然后通过animation属性应用此动画，设置动画时间为4秒，线性变化且无限循环。

以上三种方法都可以实现CSS元素的旋转操作，具体选择哪种方式取决于实际需求场景。