CODEWITHSUNDEEP
css3dcross-browsertransformwebkit-transform
Tangent Chang
Tangent Chang

Reputation: 87

Enabling perspective CSS transform in Chrome?

When I use this style with #board(the gray one)

-webkit-transform: perspective(500px) rotateX(45deg);
-moz-transform: perspective(500px) rotateX(45deg);

What it looks in Firefox:
Click me to see the picture(Sorry that I am a new user.)

But in chrome:
Click me to see the picture

What we need is the one in Firefox. So what should we do to have same look in chrome?

Upvotes: 4

Views: 5520

Answers (1)

amustill
amustill

Reputation: 5302

Generally it's best practice to place the perspective on a containing element, such as the body or a wrapping div.

Demo: http://jsfiddle.net/amustill/Qh8YV/

body {
    -webkit-perspective: 500px;
       -moz-perspective: 500px;
    }

div {
    ...
    -webkit-transform: rotateX(45deg);
       -moz-transform: rotateX(45deg);
    }

Upvotes: 5

Related Questions