Monday, June 22nd, 2009
Fun with 3D CSS and video
<p>
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:
CSS:
-
-
.face {
-
position: absolute;
-
width: 200px;
-
height: 200px;
-
overflow: hidden;
-
font-family: monospace;
-
font-size: 24px;
-
}
-
-
.top {
-
top: 0;
-
left: 89px;
-
background: #fff;
-
color: #999;
-
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-
}
-
-
.left {
-
top: 155px;
-
left: 0;
-
background: #999;
-
color: #333;
-
-webkit-transform: rotate(15deg) skew(15deg, 15deg);
-
-moz-transform: rotate(15deg) skew(15deg, 15deg);
-
}
-
-
.right {
-
top: 155px;
-
left: 178px;
-
background: #ccc;
-
color: #666;
-
-webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
-
-moz-transform: rotate(-15deg) skew(-15deg, -15deg);
-
}
-
-
.shadow {
-
top: 310px;
-
left: -89px;
-
background: black;
-
opacity: 0.5;
-
-webkit-transform: rotate(-45deg) skew(15deg, 15deg);
-
-moz-transform: rotate(-45deg) skew(15deg, 15deg);
-
}
-
Chris Blizzard posted his Open Video Conf talk on connecting HTML5 video showcasing the great demos of Paul Rouget :)
Related Content:
3.4 rating from 33 votes
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:
http://www.tapper-ware.net/stable/web.filter.apng.dynamicTexture/index.xhtml
Or doing perspective texture mapping to play Mario Kart:
http://www.tapper-ware.net/stable/PerspectiveWith6LinesOfXML-CanvasEnhanced/index.xhtml
Or spinning a world sphere:
http://www.tapper-ware.net/stable/SVGWorld/index.xhtml
Of course you can apply such filters to anything, and yes: that includes VIDEO. Or Canvas. Or SVG. Or, well: Anything.
qwdqwd
Want work in IE6! >;D
And: SVG is dead and buried.
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.
Hey, thanks for posting my demo. Ajaxian Editors: My name is actually Zachary Johnson. (Just my website is zachstronaut.com)
hansschmucker… those demos are incredible. I wonder why they don’t work in Webkit?
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
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:
http://www.tapper-ware.net/stable/PerspectiveWith6LinesOfXML/index.svg
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:
http://www.benjoffe.com/code/demos/canvascape/textures
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.
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.
Thoughts?