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

检查this jsFiddle。现在CSS动画几乎全面展开，我想在CSS中做这样的事情：当鼠标移过一个元素（.box）时，它会放大一个动画，它的中心保持在同一个位置，所有其他元素留在原地。CSS：是否可以用动画放大CSS中的元素？

如果我知道元素的宽度，我想我可以使用每个元素的包装元素并使用元素的相对位置（.box）并为其宽度，高度，左侧和顶部设置动画。但是这个例子有元素的变量。

如果这是不可能的，对于这样的效果的任何其他建议？

2012-02-10 duality_

怎么样像[这]（http://minitech.github.com/）为你工作？它缩放它，但它可能没问题。来源https://github.com/minitech/minitech.github.com。 – Ryan 2012-02-10 19:59:15

查看我的评论对thirtydot的答案。 – 2012-02-10 20:07:46

我的答案很匆忙，而且现在已经发布了更好的答案，所以没有意见让我周围。所有评论都提到：“这很好，但不幸的是，它只能用于非常快速的转换。请检查此jsfiddle（[jsfiddle.net/uzgha/5](http://jsfiddle.net/uzgha/5））和看看文字是如何模糊的，直到动画结束为止，就像我在一个元素上进行了缩放，所以内容不是很清晰:(“ – thirtydot 2012-02-10 21:41:58

是的，你可以使用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/

来源

2012-02-10 20:02:42 Nix

我有同样的评论，从十三点的答案。 – 2012-02-10 20:10:14

我看到了这个问题，但只有在Webkit中。在Opera和Firefox中，它看起来像纯粹的迷人。 ;）它必须归因于Webkit中的文本呈现。我不确定，你会如何解决这个问题。 – Nix 2012-02-10 20:14:21

在更长的动画期间，文本仍然左右移动（请参阅：http://jsfiddle.net/uzgha/7/），但我想我可以忍受这一点。我会将您的答案标记为已接受。 – 2012-02-10 20:19:03

是的，使用转换和转换。下面是一个更新小提琴：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/

来源

2012-02-10 20:01:30 rgthree

我有和thirtydot的回答相同的评论。 – 2012-02-10 20:05:57

是的，浏览器是实际上将元素向上缩放，所以模糊会带来副作用_（看起来像Chrome在缩放完成后重新渲染文本）。关于这一点你可以做的不多，它更多的是由浏览器来更好地处理在这种情况下'scale（）'是绝对要用的 – rgthree 2012-02-10 20:12:11

@duality_编辑我的答案有一个“缩小”的小提琴。相同的概念，但现在原始尺度将被后处理，动画：http://jsfiddle.net/rgthree/wTbTf/2/ – rgthree 2012-02-10 20:19:19

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

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

来源

2012-02-10 20:14:52