[分享]css3围绕长方形的过渡动画

CSS3在动画方面的表现十分出色，特别是可以实现围绕长方形的过渡动画，下面让我们一起来看看如何实现吧。

.square{
   width: 200px;
   height: 100px;
   border: 2px solid #000;
   border-radius: 20px;
   transition: transform 1s;
}
.square:hover{
   transform: rotate(180deg);
} 

在上面的代码中，我们首先定义一个长方形，采用border-radius属性将其变成圆角矩形。transform属性是实现动画关键，它将在1秒内变换，当鼠标悬停在长方形上时，transform属性中的rotate函数将会以中心点为轴心，在1秒内将长方形旋转180度。

这样做的好处是可以让页面更加生动有趣，吸引用户的注意力。此外，CSS3动画可以取代JavaScript实现动画的功能，因为CSS3动画的性能更好，加载速度更快，而且不会影响网页的加载速度。所以，如果你想给网站添加一些动画效果，不妨考虑使用CSS3动画。