<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one{
width: 200px;
height: 200px;
background-color: red;
transition:width 2s,height 2s,border-radius 2s,transform 2s;
-webkit-transition:width 2s,height 2s,border-radius 2s,transform 2s;
}
.one:hover{width: 300px;height: 300px;border-radius: 100%;background-color: yellow;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="one">看看我怎么旋转</div>
</body>
</html>
</pre><img src="https://img-blog.csdn.net/20160817152050308?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" /><img src="https://img-blog.csdn.net/20160817152100773?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" /><pre>