CODEWITHSUNDEEP
css3dtransform
vulgarbulgar
vulgarbulgar

Reputation: 844

3D CSS Transform - transform:rotateX(180deg);

I'm trying to animate an image on hover by flipping it upside-down (180 deg) along the x-axis.

Just like here

Except I can't get it to work for some reason.

img {
    transition:all 2s ease-in-out;
    perspective: 800px;
    perspective-origin: 50% 100px;
}

img:hover {
    transform:rotateX(180deg);
}

Upvotes: 0

Views: 8054

Answers (1)

Jezen Thomas
Jezen Thomas

Reputation: 13800

According to this page, Chrome still needs the -webkit prefix.

You're missing the browser prefix.

img {
    -webkit-transition:all 2s ease-in-out;
    -webkit-perspective: 800px;
    -webkit-perspective-origin: 50% 100px;
}

img:hover {
    -webkit-transform:rotateX(180deg);
}

This also means that you'll need to add in the other browser prefixes for their respective browsers. If you would rather not mess around with browser prefixes, you can use a plugin called prefixfree.js by Lea Verou to take care of it all for you.

Upvotes: 4

Related Questions