利用这个可以实现盒子的水平垂直居中，我们之前的做法是：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { position: relative; height: 100px; width: 100px; background-color: blue; } div p { position: absolute; height: 20px; width: 20px; background-color: green; margin-top: -10px; margin-left: -10px; top: 50%; left: 50%; } </style> </head> <body> <div> <p> </p> </div> </body>效果： 我们先是给盒子加了一个绝对定位，然后用 top: 50%; left: 50%;调整位置： 我们发现位置偏了，于是要让它向上、左分别移动高度、宽度的一半便能达到目的：
margin-top: -10px; margin-left: -10px;绝对定位之后再进行margin操作是相对于盒子本身来移动的？
但现在用如下方式也可做到相同效果：
div p { position: absolute; height: 20px; width: 20px; background-color: green; /* margin-top: -10px; margin-left: -10px; */ top: 50%; left: 50%; transform: translate(-50%, -50%); }我们可以用这个来做一些简单的特效，当鼠标移动到盒子上时会在0.5s内顺时针旋转360°：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { margin: 200px auto; width: 200px; height: 200px; background-color: red; transition: all .5s ease; border: 3px solid plum; } div:hover { transform: rotate(360deg); } </style> </head> <body> <div> 123 </div> </body>还有这个： 我们之前做这种小三角是用的字体图标，但还可以用如下方法：
先弄两个边框，然后将其旋转相应角度就可以了其实就是保留橙色区域的内容，下面来看具体代码：
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { position: relative; width: 200px; height: 40px; border: 2px solid #ccc; } div::after { content: ""; position: absolute; height: 10px; width: 10px; border-right: 2px solid #ccc; border-bottom: 2px solid #ccc; right: 13px; top: 10px; transform: rotate(45deg); transition: all .5s ease; } div:hover:after { top:15px; transform: rotate(225deg); } </style> </head> <body> <div></div> </body>效果： 当鼠标经过时：
上面所说的旋转都是以图形中心旋转的，也可以以其它点旋转。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 400px; height: 200px; background-color: red; margin: 100px auto; transition: all 1s; transform-origin: left bottom; } div:hover { transform: rotate(180deg); } </style> </head> <body> <div></div> </body>效果： 可以看见，现在是以左下顶点为中心旋转了(这里可能看不出来…)
来做一个案例：当鼠标经过一个盒子时，有另一个盒子旋转出现在里面。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px; height: 200px; overflow: hidden; border: solid 1px black; /* background-color: red; */ margin: 100px auto; } div::before { content: ""; display: block; width: 200px; height: 200px; background-color: rgb(79, 224, 79); transform: rotate(180deg); transform-origin: left bottom; transition: all .5s ease-in; } div:hover::before { transform: rotate(0deg); } </style> </head> <body> <div></div> </body>效果：
其实直接在hover里修改width/height也能放大，但这么做的放大盒子的上边不会改变，会向下放大；但scale默认是围绕着中心放大(当然可以设置放大的原点)，且不会挤走别的盒子。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 329px; height: 360px; overflow: hidden; margin: 100px auto; border: 1px solid black; } div img { transition: all .3s; } div:hover img { transform: scale(1.2); } </style> </head> <body> <div> <img src="./pic1.jpg" alt=""> </div> </body>效果：
