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