Webkit CSS Perspective Demo

posted on: September 4, 2009 in: CSS
7

webkit-perspective

I’ve been experimenting with some advanced webkit CSS properties. I’m planning on putting together a sandbox of development experiments where I can have a play with some of the new stuff coming out. This is the first in a series of experiments.

This demo touches on a few of the new CSS visual enhancements within webkit. Please note it will only work on webkit browsers and has only been tested in Safari 4.

View the Demo

The main properties used are:


-webkit-transform:
-webkit-perspective:
-webkit-animation:

I’ve also used a few more regular properties such as:


-webkit-box-shadow:
-webkit-border-radius:
-webkit-gradient:

This is only a quick demo to help understand what could be achieved.

To see the full code, view the demo and view source, I’ve made this self contained and included the CSS within the file.

There is no extra HTML markup the thumbnails are within a regular unordered list. HTML MarkUp:


<ul id="portfolio-thumbs">
<li><a href="#"><img alt="" /></a></li>
<li><a href="#"><img alt="" /></a></li>
<li><a href="#"><img alt="" /></a></li>
<!-- Plus 5 more -->
</ul>

7 Comments

Leave a comment
  1. Tomi said on November 9, 2009 @ 18:55

    I trying the demo on Windows Vista with Safari 4.0.2. It doesn’t work. There are the images but they are not in perspective.

    Could it be it only works in OS X?

  2. kev said on November 9, 2009 @ 20:16

    Hi Tomi i cant test on Vista at the moment. It should work on any up to date webkit browser. Ill be interested to see what versions support perspective.

  3. Hrafnahnef said on March 9, 2010 @ 18:18

    I believe perspective only works on Safari Mac OS X at the moment. Something to do with the underlying systems connection to 3D hardware I think. At least Perspective does NOT work in Chrome for Linux, which is also a webkit browser.

  4. danixd said on June 6, 2010 @ 22:58

    Not working on XP Chrome 5.0.375.70 beta either.

  5. Dan O'Connell | Digital Designer said on June 6, 2010 @ 23:05

    [...] webkit perspective looks awesome. Seems to only work in Safari OSX though: http://kevchapman.co.uk/css/webkit-css-perspective-demo/ [...]

  6. xero said on July 7, 2011 @ 21:40

    works/looks great on win7 64bit w/ chrome 12!

  7. Counter Space said on October 11, 2011 @ 12:35

    I’ve tried it in Linux, Chromium 12, and it doesn’t work. How very disappointing that only Safari users will get the benefit of that.

Leave a comment