Dynamic-CSS Example 10 - Working With 3D

warning : this post is based on previous posts be sure you read them.

In this example we will create one dcss call for the container and another call for the grid.

this is only an implementation of the plugin to show how final results may be in production.

Code
-----------------------------------------------------------
//animating container element
    $('#container').dcss({
        transform  : 'perspective( 600px ) rotateY(<ang>deg)',
        transition : 'all 2s 0s ease-in-out',
        transformStyle: 'preserve-3d'
    },
    {
        ang : function(){
            var rnd = Math.random() * 360;
            return -180 + rnd;
        },
    });
    
//animating grid elements
$('#container').children().filter('div').dcss(
        //css properties to be processed and applied to object
    {
        pointerEvents:'none',
        transform : 'translate3d(0px,0px,<z>px) scale(1,1)',
        opacity   : '0',
        transition : 'all <time>s <delay>s ease-in-out'
    },
    {
        //values to be applied to property values
        z     : function(i){
            return -200 + Math.random() * 400;
        },
        
        delay : function(i){ 
            return Math.random() * .5;
        },
        time  : function(i){ 
            return .5 + Math.random() * .5;
        } 
    }

);

-----------------------------------------------------------

The normal image to be used

Result