css - CSS3 Transformed 元素在过渡期间会丢失其变换。（包括 jsFiddle）

Question

所以我有这些六边形瓷砖，我想在悬停时放大。六边形由多个 DIVS 和 CSS3 变换完成。我想要的是比例转换，但是转换后的部分在转换过程中会失去转换，并在完成后重新出现。有什么建议么？

这是一个小提琴： http: //jsfiddle.net/A2mTU/1/ 它应该是这样的（注意：我知道他们使用 canvas 元素，我需要为此使用常规 CSS）：http://www.upperfirst .com

谢谢！

Answer 1

形成六边形图块的方式不适合应用具有绝对定位元素的动画。我会推荐这种方式：http: //jsfiddle.net/linmic/5aqSK/

干杯

Answer 2

我建议使用这种技术来创建六边形，这样您就不会在缩放它们时遇到当前遇到的问题：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);
}