效果图:
代码:
<head>
<meta charset="UTF-8">
<title>鼠标悬停旋转360度transition过渡+transfrom转换</title>
<style>
div{
width:100px;
height: 100px;
color: aliceblue;
background: green;
/* 添加的过渡变化 需要改变的属性改变时*/
transition: width 2s,height 2s,transform 2s;
-moz-transition: width 2s,height 2s,transform 2s;
-webkit-transition: width 2s,height 2s,transform 2s;
-o-transition: width 2s,height 2s,transform 2s;
}
div:hover{
/* 鼠标悬停上时要改变的属性状态*/
width: 200px;
height: 200px;
transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
</style>
</head>
<body>
<div >哈哈哈</div>
</body>