css点击后自动旋转 |css3飞出动画

首先，大家需要定义一个需要旋转的元素，并给它添加一个旋转动画的关键帧。在这个例子中，大家选择一个简单的蓝色正方形块。

.square{
width: 100px;
height: 100px;
background-color: blue;
transition: transform 1s;
}
.square:hover{
transform: rotate(360deg);
}

在上面的代码中，大家定义了一个.square的类，它是一个100×100的蓝色正方形。大家把transform的过渡效果设置为1秒，这样在进行旋转时就会产生一个平滑的过渡效果。当大家鼠标悬停在正方形上时，大家添加了:hover伪类，它使正方形沿着自己的中心旋转了360度。

接下来，大家可以添加一些其他的CSS属性来自定义旋转后的元素。比如，大家可以添加透明度和阴影效果，让正方形更加生动和立体。

.square:hover{
transform: rotate(360deg);
opacity: 0.7;
box-shadow: 0 0 10px rgba(blue, 0.5);
}

在上述代码中，大家增加了opacity属性来降低元素的不透明度，并添加了box-shadow效果来添加一个轻微的阴影效果。

使用以上代码，大家就可以创建一个点击后自动旋转的元素了。这种效果可以应用于大多数元素，让你的页面更具交互性和动感。