Playing Around with HTML5: Masked Video Rotates Around 3D Axis

Sometimes you just gotta keep up with the times. A combination of HTML5, CSS3, and JQuery can really result in some interesting interactive compositions, however some CSS3 methods are only available in WebKit enabled browsers. The HTML5 Rotating Masked Video Example featured here is based off the Tron example found in the Safari 5 Developer Library.

This example is by no means interactive, but on its way to becoming so dynamically with JQueryUI, or even just CSS3. For now, the visualization rotates a masked video around a central 3D axis. The mask was created in Adobe Illustrator with a vector drawing exported to web with SVG. While other examples I’ve seen use PNG which would allow you to mask with a raster image, I couldn’t get PNG to work on either of the latest builds of Safari 5.1 (7534.48.3) or Chrome (15.0.874.54 beta). I opted for SVG which actually looks good with this example since I styled the mask like a shard, however feathering is also favorable usually with masks.

View a Live Code Example on codepen.io

The video is embedded with the new HTML5 video tag. This isn’t the most cross-browser example, preferring Safari and Chrome. The video does not auto play on iOS devices. The properties without attributes on the video tag threw me for a loop, this is the first time I’ve used them. I wish there were attributes for loop. I’d like to be able to mirror loop the video of waves coming in to shore at sunset. I could just do this in Final Cut. The video tag is nothing special, it’s what you do with it that makes it interesting.

I wanted to find a method for animating purely with CSS, but without using JQuery $(document).ready(function() like on the zodiacbaby.com website I designed. No javascript was used so far in this example, I could have used it to expand my options in animating the video. In most of the examples I read CSS3 keyframed animation is always in response to hovering over the object with the mouse. This example animates a CSS object when the document loads just with the code below. Check out the infinite property in the -webkit-animation property of the player class.

Currently, the -webkit-box-reflect doesn’t work in Safari 5.1. But it works in Chrome. I used the code from the Safari Developer example too, so you think it would work in Safari 5. How does the reflection display for you?

The animation target, duration, and loop is set using the -webkit-animation property in the player class.

The animation is keyframed using the @-webkit-keyframes rotate object, a special type of class in CSS3. Notice how the keyframes change -webkit-transform: rotateY(180deg); of the player object.

The mask is applied to the video object itself using -webkit-mask-box-image: url(media/broken_glass.svg). The transformation is nested. The video object is constantly rotated -22 degrees on the Z-Axis, while the encapsulating player class is rotating in the Y Axis.

In conclusion, you can animate any property with CSS3 and loop it infinitely. You could change that property of the animation dynamically with JS I suppose, so that it stops looping and starts again for some reason or another. The video and img tags can be masked with SVG, but what about a div with a background-color on it? Can solids be masked as well? And how many objects with different SVGs can the browser handle? All this and more in later installments of Playing Around in HTML5.