<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
div{
height: 300px;
width: 500px;
background-color: red;
margin:100px auto;
/*设置中心点*/transform-origin: center center;
/*设置阴影*/
box-shadow: 2px 2px 2px #ccc;
}
/*开始动*/
div:hover{
/*2d旋转的效果*/
/* transform: rotate(30deg); */ /*deg是角度*/
/*3d旋转的效果*/
transform: rotateX(50deg); /*绕x轴3d旋转*/
/*放大和缩小*/
/* transform:scale(0.5); */ /* 缩放0.5倍 */
/* transform:scale(1.2); */ /*放大到1.2倍 */
/* transform:scaleY(1.2); *//*在y轴的方向放大到1.2倍*/
/* transform:scale(2,3); */ /*在X轴放大到2倍，在y轴放大到3倍*/
/*旋转的效果*/
transition: all 2s; /*2s内完成效果*/
}
</style>
<body>
<div class="box">
</div>
</body>
<script>
</script>
</html>
