Geek asks and answers

CSS3 Transformed elements lose their transformation during the transition. (jsFiddle enabled)

So, I have these hexagonal tiles that I would like to increase on hovering. The hexagon is executed with several DIVS and CSS3 transformations. I would like to have a transition in scale, but the transformed parts lose their transformation during the transition and reappear after its completion. Any suggestions?

Here's the 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

Thank!

+3
source share
2 answers

, , : 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);
}
+1

More articles:


All Articles