- This topic is empty.
-
AuthorPosts
-
December 23, 2012 at 11:02 pm #39608TheInfectionParticipant
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?
December 23, 2012 at 11:39 pm #118787DustinWoodsMemberDoes [this example](http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html) work on your browsers?
December 24, 2012 at 9:09 am #118832TheInfectionParticipant@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/
December 24, 2012 at 9:13 am #118834December 24, 2012 at 9:16 am #118835TheInfectionParticipant@chrisburton Do you think it could be a problem with Chrome and Safari? Because Firefox loads it perfectly fine.
December 24, 2012 at 9:19 am #118836chrisburtonParticipantIt’s not working in webkit browsers because you have only specified the -moz- prefix. Add -webkit- as well.
December 24, 2012 at 9:27 am #118839TheInfectionParticipant@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.
December 24, 2012 at 9:36 am #118841chrisburtonParticipantIt works fine for me in Firefox, Chrome and Safari. What versions are you using?
December 24, 2012 at 10:13 am #118844TheInfectionParticipantDecember 24, 2012 at 10:14 am #118845chrisburtonParticipantScreenshot the jsfiddle I posted using Chrome.
December 24, 2012 at 10:19 am #118846TheInfectionParticipantDecember 24, 2012 at 10:33 am #118848chrisburtonParticipant@TheInfection In the address bar in Chrome, type: chrome://gpu/
Screenshot that and show me.
December 24, 2012 at 11:16 am #118852TheInfectionParticipantDecember 24, 2012 at 11:22 am #118854chrisburtonParticipant@TheInfection Hardware acceleration isn’t support for 3D CSS rendering. That is why you don’t see it.
December 24, 2012 at 11:25 am #118855TheInfectionParticipant@chrisburton Damn. Is there anything I can do about it?
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.