css3点击旋转180°

在CSS3中，我们可以使用一些新的动画特效来增强网页的交互效果。其中，点击元素旋转180°是一种常见的动画特效。下面，我们将通过代码演示来学习如何实现这种效果。

.rotate{
    transition: all 0.5s ease;
}

.rotate:hover{
    transform: rotate(180deg);
} 

首先，我们需要给需要进行旋转的元素添加一个类名，这里我们使用了.rotate作为类名。

其次，在.rotate类名中，我们使用了CSS3中的过渡(transition)属性来定义元素的过渡效果。这个属性包含了三个参数：过渡属性、过渡时间和过渡方式。这里我们设置了过渡属性为“所有(all)”，过渡时间为0.5秒，过渡方式为“缓入缓出(ease)”。这个属性告诉浏览器我们要在过渡时间内对所有属性进行过渡效果。

最后，我们使用:hover伪类来表示鼠标悬停时的状态。在这个状态下，我们使用了transform属性来进行元素的旋转效果。其中，rotate(180deg)表示要将元素旋转180度。

通过上述代码，我们就成功地实现了点击元素旋转180°的动画效果。在实际使用中，我们可以对过渡时间、过渡方式和旋转角度等参数进行调整，以适应不同的需求。