CSS翻转动画不起作用

Question

using CSS3 perspective, I would like to make a flipping animation. Here is my code:

HTML:

<header>
    <div id="h1">
        <h1>Title</h1>
    </div>
</header>

CSS:

header div#h1{
    width: 150px;
    perspective: 150px;
    -webkit-perspective:150px; 
}
header div#h1 h1{
    position: absolute;
    animation: flip 5s infinite;
}


@keyframes flip{
    0%{
        transform: rotate(0);
        -webkit-transform: rotate(0);
    }
    25%{
        transform: rotateX(45deg);
        -webkit-transform: rotateX(45deg);
    }
    50%{
        transform: rotateX(90deg);
        -webkit-transform: rotateX(120deg);
    }
    75%{
        transform: rotateX(120deg);
        -webkit-transform: rotateX(120deg);
    }
    100%{
        transform: rotateX(180);
        -webkit-transform: rotateX(180);
    }
}
/* -webkit- keyframes */

FIDDLE

It seems like this animation should work, but it doesn't.

Why is this not working?

Thank you.

Answer 1

I added some prefixes. Please check this fiddle.

Fiddle

CSS

header div#h1 h1{
    position: absolute;
    -webkit-animation: flip 5s infinite; /* Safari 4+ */
    -moz-animation:    flip 5s infinite; /* Fx 5+ */
    -o-animation:      flip 5s infinite; /* Opera 12+ */
    animation:         flip 5s infinite; /* IE 10+ */
}

Answer 2

Just a demo example http://jsfiddle.net/6zF4X/2/

It wasn't flipping all the way since your last value was 180deg instead of 360deg. I adjusted some of the other deg's, but you should adjust the degrees the way you want. Just make sure the first one is 0 and the last is 360. Also, it's best practice to use the same value types throughout the animation. So I used rotateX(0) for the 0% instead of rotate(0) like you had before.

I changed some other stuff around in the fiddle, so don't use that fiddle exactly. Just change your rotate deg's accoringly and it will work.

@keyframes flip{
    0%{
        transform: rotateX(0);
    }
    25%{
        transform: rotateX(80deg);
    }
    50%{
        transform: rotateX(160deg);
    }
    75%{
        transform: rotateX(280deg);
    }
    100%{
        transform: rotateX(360deg);
    }
}