Pregunta

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?

¿Fue útil?

Solución

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);
    }
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top