<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.box{width:1000px;margin:100pxauto;}.box > div {width:300px;height:150px;border:1pxsolid#000;background-color:red;float:left;margin-right:30px;}
div:nth-child(2) {background-color: pink;transition: all 1s;}/* translate:(水平位移，垂直位移)*/
div:nth-child(2):hover{transform: translate(-50%, -50%);}</style>
</head>
<body>
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
效果：
上图中，因为我在操作的时候，鼠标悬停后，立即进行了略微的移动，所以产生了两次动画。正确的效果应该是下面这样的：
应用：让绝对定位中的盒子在父亲里居中
我们知道，如果想让一个标准流中的盒子在父亲里居中（水平方向看），可以将其设置margin: 0 auto属性。
可如果盒子是绝对定位的，此时已经脱标了，如果还想让其居中（位于父亲的正中间），可以这样做：
div {
width: 600px;
height: 60px;
position: absolute; 绝对定位的盒子
left: 50%; 首先，让左边线居中
top: 0;
margin-left: -300px; 然后，向左移动宽度（600px）的一半
}
如上方代码所示，我们先让这个宽度为600px的盒子，左边线居中，然后向左移动宽度（600px）的一半，就达到效果了。
现在，我们还可以利用偏移 translate 来做，这也是比较推荐的写法：
div {
width: 600px;
height: 60px;
background-color: red;
position: absolute; 绝对定位的盒子
left: 50%; 首先，让左边线居中
top: 0;
transform: translate(-50%); 然后，利用translate，往左走自己宽度的一半【推荐写法】
}
格式：
transform: rotate(角度);
transform: rotate(45deg);
参数解释：正值 顺时针；负值：逆时针。
举例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.box{width:200px;height:200px;background-color:red;margin:50pxauto;color:#fff;font-size:50px;transition: all 2s;/* 过渡：让盒子在进行 transform 转换的时候，有个过渡期 */}/* rotate（角度）旋转 */.box:hover{transform: rotate(-405deg);/* 鼠标悬停时，让盒子进行旋转 */}</style>
</head>
<body>
<div>1</div>
</div>
</body>
</html>
效果：
注意，上方代码中，我们给盒子设置了 transform 中的 rotate 旋转，但同时还要给盒子设置 transition 过渡。如果没有这行过渡的代码，旋转会直接一步到位，效果如下：（不是我们期望的效果）
案例1：小火箭