CSS3转换的元素在转换期间丢失其转换。（包括jsFiddle）

所以我有这些六边形的瓷砖，我想在hover上放大。六边形是通过多个div和CSS3变换完成的。我想在比例中进行转换，但是转换的部分在转换过程中会丢失其转换，并在转换完成后重新显示。有什么建议吗

这是一把小提琴： 下面是它的外观（注意：我知道他们使用canvas元素，我需要使用常规CSS）：

---

谢谢

形成六边形平铺的方式不适合应用具有绝对定位元素的动画。我建议这样做：

---

干杯

我建议使用此技术创建六边形，这样在缩放六边形时就不会遇到当前遇到的问题：

---

为什么悬停前的质量这么低？你说的低质量是什么意思？但我明白了。添加-webkit转换：比例（1.00001）；在边缘上启用抗锯齿，使其看起来更平滑！看看这把小提琴中的抗锯齿技术：与这里的非抗锯齿技术：是的，单元素！你的语法赢了+1另外，添加-webkit转换：比例（1.00001）；要反锯齿的边缘！请看这里：

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);
}