css3 transform 问题

默认情况下，DOM树是按顺序向下排列的，并不是像你说的那种从左向右排列，所以，如果你想让一个div左移而让其右边的div跟随它左移，可以设置2个div都浮动向左，或者用CSS3的-webkit-box、-moz-box空间盒，将两个盒子放置在一个容器内，只要大小设定好就可以实现

要移动整个元素位置是javascript该干的事，这不是css的错，是你想法有误区。考虑下面代码：

aaaa

cccc

div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: -webkit-transform .5s ease-in, background .5s ease-in;
-moz-transition: -moz-transform .5s ease-in, background .5s ease-in;
-o-transition: -o-transform .5s ease-in, background .5s ease-in;
transition: transform .5s ease-in, background .5s ease-in;
}

div:hover {
-webkit-transform: rotate(180deg) scale(2);
-moz-transform: rotate(180deg) scale(2);
-o-transform: rotate(180deg) scale(2);
-transform: rotate(180deg) scale(2);
background: blue;
}

p{width:100px;height:100px;background:#666;}

如果按你的想法，这个方块放大变形后就能影响下面的p，能把p挤得离开本来的位置，那你想象一下：一个精心设计的页面，这个变大的div前后都有各种元素，div一变，前后的元素都被挤乱，那你精心设计的页面布局就全乱成一团了，届时估计你会和很多人一样抱怨这个功能让页面难以控制，是设计这功能的人没经过考虑。实际上w3c这么多专家牛人，肯定考虑得比你周到。

translate移动的坐标是相对当前对象的，而不是相对body的，比如，你在公交车上走动，人的位置相对公交车发生变化，这就相当于用translate改变位置，但是公交车没有动，所以后面的车也不能前进，后面的车就相当于浮动的那个div