今天在使用这个样式属性的时候，发现了一些小问题，值得记录一下。
这是规范文档上写的，第一条说的就是：这个布局属性只用于块级元素或原子行内元素，或者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，则可以实现旋转
使用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并没顶上来，移动的位置会留白。如图所示
