4

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?

Community
  • 1
  • 1
Tangent Chang
  • 87
  • 2
  • 7

1 Answers1

5

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);
    }
amustill
  • 5,274
  • 23
  • 15
  • 2
    Dear @amustill , thanks for answer my question. I've tried it in Firefox and in Chrome. It still works well in Firefox, but **displays only a rectangle in chrome**.(What I want is a trapezium-like view.) – Tangent Chang Jan 23 '13 at 03:13
  • @TangentChang Which version of Chrome are you using? I'm seeing the expected and same results in both Firefox and Chrome. This syntax should work as far back as Firefox 10 and Chrome 12. – amustill Jan 23 '13 at 10:36
  • I'm using Chrome 24.0.1312.56 m, the latest one. – Tangent Chang Jan 23 '13 at 10:47
  • @TangentChang So you don't see something like this? http://i.imgur.com/5pQc7UP.png I'm using the exact same version of Chrome. – amustill Jan 23 '13 at 10:58
  • I don't see that but a rectangle. – Tangent Chang Jan 23 '13 at 11:00
  • @TangentChang That's very strange. I've added in a little support detection. Can you test this link? http://jsfiddle.net/Qh8YV/2/ What does it say? – amustill Jan 23 '13 at 11:09
  • I've just searched for this problem. I found that maybe the problem is at GPU, since it shows "3D CSS: Unavailable. Hardware acceleration unavailable". – Tangent Chang Jan 23 '13 at 11:16
  • It says that 3D transforms are not supported. – Tangent Chang Jan 23 '13 at 11:17
  • @TangentChang I see. Having searched myself, it seems that simply re-installing Chrome is a potential 'fix'. I assume you located the diagnostic in Chrome's `about:flags` page? – amustill Jan 23 '13 at 11:19
  • I used `about:GPU`, and I think that maybe the problem is caused by the graphics driver. – Tangent Chang Jan 23 '13 at 11:25