Question

检查this 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/

Answer 2

是的，使用变换和过渡。这是一个更新小提琴：http://jsfiddle.net/rgthree/wTbTf/

.container {-webkit-transform:translateZ(0); /* Stop webkit flicker bug */}
.box {
    postion:relative;
    z-index:1;
    -webkit-transition:-webkit-transform 0.5s ease-in-out;
    -moz-transition:-moz-transform 0.5s ease-in-out;
    -o-transition:-o-transform 0.5s ease-in-out;
    transition:transform 0.5s ease-in-out;
}    
.box:hover {
    z-index:2; /* Put on top of others */
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -o-transform:scale(1);
    transform:scale(1);
}

您还可以按比例缩小，例如：http://jsfiddle.net/rgthree/wTbTf/2/

Answer 3

我的答案不是一个完整的答案（所以我没有把它标记为已被接受）并且还有一个缺点：文本似乎在动画时移动，但这是我的jsfiddle没有模糊，但不幸的是使用固定宽度框（我知道我没有要求这个:)，也许有人可以改进我的答案。）

http://jsfiddle.net/5jfDC/1/

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

3 个答案: