CSS3 Transformed elements lose their transform during transition. (jsFiddle included)

Question

So I have these hexagonal tiles that I would like to scale up on hover. The hexagon is done with multiple DIVS and CSS3 transforms. I'd like to have is transition in the scale, but the transformed parts lose their transform during the transition and re-appear after it finishes. Any suggestions?

Here's a fiddle: http://jsfiddle.net/A2mTU/1/ Here's what it should look like (NOTE: I know they use the canvas element, I need to use regular CSS for this): http://www.upperfirst.com

Thanks!

Answer 1

I would recommend using this technique for creating the hexagons so that you don't get the issues you are currently experiencing when scaling them: 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);
}

Answer 2

The way you form the hexagonal tiles is not good for applying animations with absolute positioned elements. I would recommend this way: http://jsfiddle.net/linmic/5aqSK/

Cheers