今天在使用这个样式属性的时候，发现了一些小问题，值得记录一下。
一、transform属性的适用范围
这是规范文档上写的，第一条说的就是：这个布局属性只用于块级元素或原子行内元素，或者display属性值为table-row, table-row-group, table-header-group, table-footer-group, table-cell, table-caption的元素。
比如使用span元素，使用transform属性就无效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style>
.rotate {
transform: rotate(90deg);
}
</style>
</head>
<body>
<span class="rotate">测试</span>
</body>
</html>运行上面的代码，会发现span元素未被旋转，但是将span转为block或者inline-block，则可以实现旋转
二、rotate旋转不会导致margin跟着旋转
直观理解，旋转过后盒子模型的width、height、padding、border、margin等跟着旋转，但实际上margin方向不会改变。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>rotate</title>
<style>
.rotate {
transform: rotate(-90deg);
display: inline-block;
margin-left: -15px;
padding-left: 15px;
border-left: 1px solid #000;
background-color: aquamarine;
}
</style>
</head>
<body>
<div style="height: 10px"> </div>
<span class="rotate">测试</span>
</body>
</html>举个例子来说明。在这里padding、width、height、border都随着盒子旋转而改变，而不显示margin属性却未旋转，还是按照视图的方向。
按照上面的样式，padding，border都进行了旋转，但是margin还是按照视图上的水平左方向缩进。
三、translate不会脱离文档流
使用translate和relative一样，不会脱离文档流。ps：translate配合absolute定位可以实现居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span style="display: inline-block;transform: translate(10px,0px)">ceshi</span><span>hahah</span>
</body>
</html>运行之后会发现，后面的haha并没顶上来，移动的位置会留白。如图所示
