CODEWITHSUNDEEP
csscss-transitionscss-transforms
alt
alt

Reputation: 13947

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

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!

Upvotes: 3

Views: 661

Answers (2)

joshnh
joshnh

Reputation: 8734

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

Upvotes: 1

Linmic
Linmic

Reputation: 791

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

Upvotes: 1

Related Questions