Webkit CSS Perspective Demo

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>