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