Grow your CSS skills. Land your dream job.

transform not working as expected

  • # July 12, 2013 at 5:28 am

    on my way learning css3 I came across this:

    I am using following css to make div rotate along y-axis on hove and un-hover…. It works sometimes but sometimes it blinks in middle of transformation…

    div.trans
    {

    height: 70px;
    width: 70px;
    -moz-transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -moz-transition: all 400ms ease-out 0s;
    -webkit-transition: all 400ms ease-out 0s;
    background: none repeat scroll 0 0 transparent;
    border-radius: 2px 2px 2px 2px;

    }
    div.trans:hover{
    background-color:#28A3CC;
    -moz-transform:rotateY(0deg);

    -webkit-transform:rotateY(0deg);

    }

    am I doing anything wrong?

    # July 12, 2013 at 5:32 am

    my apologies for not formatting the css correctly.. here it is ..

    div.trans
    {
    height: 70px;
    width: 70px;
    -moz-transform: rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    -moz-transition: all 400ms ease-out 0s;
    -webkit-transition: all 400ms ease-out 0s;
    background: none repeat scroll 0 0 transparent;
    border-radius: 2px 2px 2px 2px;
    }

    div.trans:hover{
    background-color:#28A3CC;
    -moz-transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);

    }

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".