Monday, June 22nd, 2009

Fun with 3D CSS and video

Category: CSS, Video

How about starting the week with something fun. Zach Johnson has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS like this:

  1. .face {
  2.     position: absolute;
  3.     width: 200px;
  4.     height: 200px;
  5.     overflow: hidden;
  6.     font-family: monospace;
  7.     font-size: 24px;
  8. }
  10. .top {
  11.     top: 0;
  12.     left: 89px;
  13.     background: #fff;
  14.     color: #999;
  15.     -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
  16.     -moz-transform: rotate(-45deg) skew(15deg, 15deg);
  17. }
  19. .left {
  20.     top: 155px;
  21.     left: 0;
  22.     background: #999;
  23.     color: #333;
  24.     -webkit-transform: rotate(15deg) skew(15deg, 15deg);
  25.     -moz-transform: rotate(15deg) skew(15deg, 15deg);
  26. }
  28. .right {
  29.     top: 155px;
  30.     left: 178px;
  31.     background: #ccc;
  32.     color: #666;
  33.     -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
  34.     -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
  35. }
  37. .shadow {
  38.     top: 310px;
  39.     left: -89px;
  40.     background: black;
  41.     opacity: 0.5;
  42.     -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
  43.     -moz-transform: rotate(-45deg) skew(15deg, 15deg);
  44. }

Chris Blizzard posted his Open Video Conf talk on connecting HTML5 video showcasing the great demos of Paul Rouget :)

Posted by Dion Almaer at 7:14 am

3.5 rating from 44 votes


Comments feed TrackBack URI

Honestly, we can do even more amazing stuff with SVG filters :)

(these demos need Firefox 3.5 as the filter is applied via CSS filter property, but using an iframe SVG or combined XML document would work just as well)

Like texturing a prerendered animation in realtime:

Or doing perspective texture mapping to play Mario Kart:

Or spinning a world sphere:

Of course you can apply such filters to anything, and yes: that includes VIDEO. Or Canvas. Or SVG. Or, well: Anything.

Comment by hansschmucker — June 22, 2009


Comment by Svennedy — June 22, 2009

Want work in IE6! >;D

And: SVG is dead and buried.

Comment by Svennedy — June 22, 2009

Nope SVG is very much alive and kicking. It simply needs a more accessible way to integrate it into normal pages and the CSS filter property is a nice first step. Next would be an image decoder. SVG is already big as an image format, but we need better ways to combine SVG and HTML if we want it to be really popular.

PS: No, it won’t work in MSIE 6, but SVG filters are something very simple and compact. It could be easily implemented via Flash as a fallback.

Comment by hansschmucker — June 22, 2009

Hey, thanks for posting my demo. Ajaxian Editors: My name is actually Zachary Johnson. (Just my website is

hansschmucker… those demos are incredible. I wonder why they don’t work in Webkit?

Comment by zachstronaut — June 22, 2009

Because the filters are applied using a (for now) non-standard CSS property (“filter:url(#svgFilterId)”). They could also be applied using HTML>iframe(SVG)>filter>foreignObject(Canvas) or HTML>iframe(SVG)>filter>SVGTransform>SVGImage, I was just too lazy to set it up.
But the basic system works in all browsers that support feDisplacementMap

Comment by hansschmucker — June 22, 2009

Here’s a pure SVG variant of the Mariokart filter. It does the transformation of the (large) map image using SVGTransforms, so it’s a bit on the slow side, but it works:

Comment by hansschmucker — June 22, 2009

It is impressive what you can do with SVG… however, my tests have convinced me SVG needs some speed improvements. If only browser vendors would work hardware acceleration into their implementations!

Here is a textured Wolfenstein 3D clone running at high frame rates using JS+Canvas instead of SVG:

Comment by zachstronaut — June 22, 2009

True for normal SVG, but the filters themselves are pretty fast… which is mainly the case because they’re so brain dead simple. They’re not very versatile, but as for raw speed, they cannot be beaten, because they are already native C.

Comment by hansschmucker — June 22, 2009

In canvas we can not manipulate objects like in SVG and canvas is already part of the fab four (firefox, safari, opera and chrome)

I propose to use canvas.getContext(“SVG”) to merge canvas and SVG in order to join efforts, graphics and vectors, in one common tag.


Comment by Ajaxerex — June 22, 2009

Leave a comment

You must be logged in to post a comment.