<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 15px;
/* 谁做过渡(动画)给谁加，transition: 要过渡的属性 花费时间 运动曲线(可省略) 何时开始(可省略) */
transition: all 1.5s;
margin: 0 auto;
cursor: pointer;
/* 根据左下角为中心点旋转 */
/* transform-origin: left bottom; */
}
.box:hover {
width: 400px;
height: 400px;
/* 移动：translate(x, y)、translateX()、translateY();单位：px */
/* 旋转：rotate();单位：deg */
/* 缩放：scale(x, y) scale(); 单位：倍数*/
/* 向y轴方向移动18px、顺时针旋转360度、宽度不变高度放大两倍 */
transform: translate(0, 18px) rotate(360deg) scale(1, 2);
/* 阴影 */
box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>
