Chapter 9 ■ CSS3 3D tranSformS, tranSitionS, anD animationS
document.addEventListener( 'touchmove', onTouchMove, false );
if (touchMoveX === null ) {
if (touchStartX > deactivateX ) { deactivate(); }
else if (touchStartX < activateX * 2) { activate(); }}}
function onHashChange( event ) {
if( window.location.hash.match( 'fold' ) && !document.body.className.match( 'meny-fold' ) ) {
addClass( document.body, 'meny-fold' );
var clone = document.createElement( 'div' );
clone.className = 'meny right';
clone.innerHTML = meny.innerHTML + '
document.body.appendChild( clone );
addClass( meny, 'left' );
} else {
removeClass( document.body, 'meny-fold' );
var clone = document.querySelector( '.meny.right' );
if (clone ) {
clone.parentNode.removeChild( clone ); } } }
function activate() { if (isActive === false ) {
isActive = true;
addClass( document.documentElement, 'meny-active' ); }}
function deactivate() {
if( isActive === true ) {
isActive = false;
removeClass( document.documentElement, 'meny-active' ); }
}
function addClass( element, name ) {
element.className = element.className.replace( /\s+$/gi, '' ) + ' ' + name; }
function removeClass( element, name ) {
element.className = element.className.replace( name, '' );
}
})();
Brought together, the HTML, JavaScript, and CSS create the effect you see in Figure 9-10 for desktop
browsers and mobile devices.
Summary
3D transforms, transitions, and animations can be used to add depth and perspective to your web content. While
it can be difficult to visualize the z axis in the context of a flat 2D screen, use of the principles discussed here and
in previous chapters—including manipulation of the origin and transformation around a point, use of forced
perspective, backface visibility, and transform style—can help a lot.
So far, you’ve been producing all your code by hand. While that’s the best way to learn, CSS code
generation can be made much quicker and more efficient with well-configured tools, for which you will find
recommendations in the next chapter. You’ll also take a look at where the next innovations in CSS, together with
related technologies, are likely to come from.