Safari 3d CSS experiments

late last year when i discovered 3d css i was excited to put it to use.. i had 2 ideas i needed to execute; a plane or surface that tracked (rotated to follow) the mouse position, and a 3d css logo..

at this time safari is still the only browser to fully support 3d css. chrome supports X and Y rotations, but no depth or perspective (no Z axis), so in chrome they almost work.

unfortunately at this point these are little more than experiments.. i have incorporated the basic technique of the 'mouse to 3d rotate' functionality in the game screenshots of this site (see: Arcade), which dynamically adds side and back faces, and uses a css animation for the hover effect. i would luv to go nuts with this shtuff, but the applications and limitations are somewhat constrained..

the 3d mousefollow experiment served additional purposes; once i got a single plane to follow the mouse, it seemed like a good way to stress test the effect. the minutia of the performance details escape me atm, but i recall that safari uses hardware acceleration and chrome uses software acceleration. so despite the fact that only safari supports depth and perspective, even without the z-axis safari still handles more simultaneous action smoother..

once again these are at present only fully functional in safari.

giant 3d css dsub logo w/ mousefollow

the logo itself is created entirely from html & css, at runtime sides and backfaces are created, and javascript tracks the mouse while applying the css for X and Y axis rotation.

clicking the mouse will toggle the mousefollowing effect on and off.

0.1x scale 3d css dsub logo

same as the giant logo, but X & Y scaled 0.1x (Z axis was arbitrarily scaled).

mouse to 3d rotate

the browser viewport is filled with planes that rotate and follow the mouse position (when inside the browser viewport). the number of planes horizontally and vertically can be changed, whether or not the planes are squares can be toggled, and the max rotation & perspective can also be adjusted.

the default color scheme for this example is 'dynamic gray', where the lightness of each plane is determined by the mouse's proximity to the center of each plane, somewhat giving the illusion of dynamic lighting. the color of the planes can be changed (dynamic color is also fun), as well as the plane outline color and background color.

there are 3 options for the content of each plane; empty, "lorem ipsum" filler text, and the dynamic x/y offset & resulting x/y rotation in degrees. the last choice of content, the dynamic specs, is noticably slower since each plane's calculations are printed as fast as the system permits.

the controls can be hidden, or undocked; undocked from the top right corner of the windo, and placed on the 1st plane, however depending on the number of planes/rotation/perspective settings this can make the settings unreachable..

'update url' will put the current settings into a copy & pastable url to share or bookmark fun presets, and 'reset' will reset all values to their default state in the event that things get out of hand..

javascript tracks the mouse inside the browser viewport, calculates the 3d css transformation for each plane, and applies the css for each plane. the 3d transformations could be implemented without javascript, but for the planes to interactively follow the mouse, javascript is needed.

some fun presets: