Can’t Get CSS Perspective To Work

[TheInfection]

Ok so a few weeks ago I got this working perfectly

div.window_holder {
width: 400px;
height: 450px;
position: relative;
-webkit-perspective: 2000;
-webkit-perspective-origin: 50% 0%;
}

.window {
width: 200px;
height: 200px;
position: absolute;
-webkit-transform: rotateX(45deg);
}

The window div was rotated by 45 degrees and it had a perspective look to it. As in the top was pinched while the bottom was widened. I opened the same file again in Chrome and no matter what I did, the perspective effect never showed up. The same happened in Safari.

What am I doing wrong?

[DustinWoods]

Does [this example](http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html) work on your browsers?

[TheInfection]

@DustinWoods No. It rotates the squares rotated and when I use the slider, nothing changes.

@joshuanhibbert Can you post a screenshot so I can see what I’m supposed to be seeing?

EDIT: Well this is weird. It actually works in Firefox: http://jsfiddle.net/PdzE2/1/

[chrisburton]

@TheInfection http://cloud.chrisburton.me/Llz5

[TheInfection]

@chrisburton Do you think it could be a problem with Chrome and Safari? Because Firefox loads it perfectly fine.

[chrisburton]

It’s not working in webkit browsers because you have only specified the -moz- prefix. Add -webkit- as well.

http://jsfiddle.net/PdzE2/2/

[TheInfection]

@chrisburton Oh no, I just changed it to the -moz- prefix to test if it worked on Firefox, which it did. But when using the -webkit- prefix, it just flat out doesn’t show the perspective in Chrome nor Safari.

[chrisburton]

It works fine for me in Firefox, Chrome and Safari. What versions are you using?

[TheInfection]

@chrisburton

Chrome: 23.0.1271.97 m

Safari: 5.1.7 (7534.57.2)

Firefox: 17.0.1

[chrisburton]

Screenshot the jsfiddle I posted using Chrome.

[TheInfection]

http://i.imgur.com/cFbrA.png

[chrisburton]

@TheInfection In the address bar in Chrome, type: chrome://gpu/

Screenshot that and show me.

[TheInfection]

http://i.imgur.com/dQAQ2.png

[chrisburton]

@TheInfection Hardware acceleration isn’t support for 3D CSS rendering. That is why you don’t see it.

[TheInfection]

@chrisburton Damn. Is there anything I can do about it?

[Author]

Posts