CODEWITHSUNDEEP
htmlcss3d
bytecode77
bytecode77

Reputation: 14870

transform-style: preserve3d not working in Firefox and IE

I am using transform-style: preserve3d in order to create a flip animation. However, this animation is only 3-dimensional in Chrome, not in Firefox or IE 10. In these two browsers it's flat.

jsFiddle: http://jsfiddle.net/ZQf9j/

HTML

<ul>
    <li>TEST</li>
</ul>

CSS

ul
{
    -webkit-perspective: 600;
    -webkit-transform-origin: 50% 50%;
    -moz-perspective: 600;
    -moz-transform-origin: 50% 50%;
}
ul li
{
    display: inline-table;
    width: 100px;
    height: 100px;
    margin: 5px;
    border: 1px solid black;
    -webkit-transform: rotateY(45deg);
    -webkit-transition: all 500ms;
    -moz-transform: rotateY(45deg);
    -moz-transition: all 500ms;
}

Question

How can I make the rotation 3d in Firefox and IE, not only in Chrome?

Upvotes: 0

Views: 3172

Answers (1)

koningdavid
koningdavid

Reputation: 8105

Add px's

-webkit-perspective: 600px;
-moz-perspective: 600px;
-ms-perspective: 600px;
perspective: 600px;

Upvotes: 4

Related Questions