CSS3轉換過程中轉換後的元素會失去它們的轉換。（包括jsFiddle）

所以我有這些六角形瓷磚，我想在懸停時放大。六邊形是用多個DIVS和CSS3變換完成的。我希望在規模上有所轉變，但轉換後的部分會在轉換過程中失去轉換，並在轉換完成後重新出現。有什麼建議麼？CSS3轉換過程中轉換後的元素會失去它們的轉換。（包括jsFiddle）

這裏有一個小提琴：http://jsfiddle.net/A2mTU/1/ 下面是它應該是什麼樣子（注：我知道他們使用的canvas元素，我需要使用常規的CSS此）：http://www.upperfirst.com

謝謝！

來源

2012-05-24 alt

我會建議使用這種技術來創建六邊形，這樣你就不會得到縮放他們當你正在經歷的問題：http://jsfiddle.net/joshnh/jZMEy/

div { 
    background: black; 
    height: 60px; 
    position: relative; 
    width: 120px; 
    -webkit-transition: .25s; 
     -moz-transition: .25s; 
     -ms-transition: .25s; 
     -o-transition: .25s; 
      transition: .25s; 
} 
div:after { 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    border-top: 35px solid black; 
    bottom: -35px; 
    height: 0; 
    content: ''; 
    left: 0; 
    position: absolute; 
    width: 0; 
} 
div:before { 
    border-bottom: 35px solid black; 
    border-left: 60px solid transparent; 
    border-right: 60px solid transparent; 
    height: 0; 
    content: ''; 
    left: 0; 
    position: absolute; 
    top: -35px; 
    width: 0; 
} 
div:hover { 
    -webkit-transform: scale(1.5); 
     -moz-transform: scale(1.5); 
     -ms-transform: scale(1.5); 
     -o-transform: scale(1.5); 
      transform: scale(1.5); 
}

來源

2012-05-24 06:15:47 joshnh

Yepp，單元素！你的語法贏了。 +1 – alt

另外，添加-webkit-transform：scale（1.00001）;以反對別名的邊緣！看到這裏：http://jsfiddle.net/jZMEy/4/ – alt

偉大的提示，謝謝！ – joshnh

形成六邊形瓷磚的方式不適用於應用具有絕對定位元素的動畫。我建議是這樣的：http://jsfiddle.net/linmic/5aqSK/

乾杯

來源

2012-05-24 06:07:04 Linmic

懸停前質量如此之低？ – alt

你是什麼意思的低質量？ – Linmic

不反鋸齒。 – alt

CSS3轉換過程中轉換後的元素會失去它們的轉換。 （包括jsFiddle）

回答

相關問題

CSS3轉換過程中轉換後的元素會失去它們的轉換。（包括jsFiddle）