CSS:是否可以使用CSS放大动画元素？

Question

检查这个jsFiddle.现在CSS动画几乎全面展开,我想在CSS中做这样的事情:当鼠标越过一个元素(.box)时,它会被动画放大,它的中心停留在同一个地方,所有其他元素保持不变他们在哪里.

如果我知道元素的宽度,我想我可以用每个元素的包装元素来做,并使用元素(.box)的相对定位,并为它的宽度,高度,左边和顶部设置动画.但是这个例子有元素变量.

如果不可能,还有其他任何有关此类影响的建议吗？

Answer 1

是的,您可以使用CSS3过渡.

.box {
    -webkit-transition:  -webkit-transform .2s ease-out;
    -moz-transition: -moz-transform .2s ease-out;
    -o-transition: -o-transform .2s ease-out;
    -ms-transition: -ms-transform .2s ease-out; 
    transition: transform .2s ease-out; 
}
.box:hover {
   -webkit-transform:scale(2);
   -moz-transform:scale(2);
   -o-transform:scale(2);
   transform:scale(2);
}

见fidd.e:http://jsfiddle.net/TheNix/uzgha/6/