css-3（旋转+过渡） 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				/*设置一个宽300px,高300px的蓝色盒子*/
				width: 300px;
				height: 300px;
				background-color: blue;
				/*变化时间为3s*/
				transition: 3s;
			}
			div:hover{
				/*当鼠标触碰到这个盒子的时候,盒子在3s的时间里,发生"变宽至400px，变低至100px，绕y轴旋转45度的现象"*/
				width: 400px;
				height: 100px;
				transform: rotateY(45deg);
			}
		</style>
	</head>
	<body>
		<div></div>
	</body>
</html>

 效果图：

原始效果：

触碰后的效果：

posted @ 2018-04-03 10:49  张锐0328  阅读(150)  评论(0)  编辑  收藏  举报