CSS3 2D转换移动盒子

1. 2D转换移动 盒子的位置
   translate不影响其它任何盒子

div {
/*写法一*/
/*x指x轴上移动的位置上，y指y轴上移动的位置*/
transform: translate(x,y);
transform: translate(100px,100px);
/*写法二*/
/*单独写*/
transform: translateX(100px);

translate中的百分比单位是相对于自身元素的translate:(50%,50%);

CSS之前写法：固定了

p {
position: absolute;
/*原本设置垂直居中的初态，但是实际上偏右下，没有居中，需要一个margin值使其居中显示*/
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: blue;
/*如上解释，指定一个margin值，使其居中显示*/
margin-top: -100px;
margin-left: -100px;
}

CSS3写法：

p {
position: absolute;
/*原本设置垂直居中的初态，但是实际上偏右下，没有居中，需要一个margin值使其居中显示*/
top: 50%;
left: 50%;
width: 200px;
height: 200px;
background-color: blue;
/*translate(-50%,-50%)盒子往上走自己高度的一半*/
transform: translate(-50%,-50%);
}

translate对于行内元素是无效的