a very short introduction to CSS3D transforms

browser support

-webkit

-moz 10

-ms 10

?

2d transforms

2D


        transform:
        
        translate(200px,100px)

                  
        rotate(45deg)

                  
        scale(2)

                  
        skew(30deg)

                  
        matrix(-1,0,0,1,0,0);

3d transforms

3D


        transform: 

        
               
            
                perspective(600px)
                
            
            

        
               
            
                translateX(400px)
                
            
            
                translateY(100px)
                
            
            
                translateZ(100px)
                
            
            

            
            
               
            
                rotateX(60deg)
                
             
            
                rotateY(90deg)
                
            
            
                rotateZ(30deg)
                
            
            

        
               
            
                rotate3d(1,1,0,60deg)
                
            
            

        
               
            
                scaleX(0.5)
                
            
            
                scaleY(0.5)
                
            
            
                scaleZ(0.5);

perspective


    
    perspective: 
    
        1000px;
    

perspective-origin: 50% 50%;

front

back

left

right

top

bottom


    .cube { 

       
    transform: 
    
        
            perspective(600px)
            
        
        

        
               
        
            rotateX(330deg)
            
         
        
            rotateY(320deg)
            
        
        
            rotateZ(0deg);
    

       
    transform-style: preserve-3d;
        /* default: `flat` */

    }


    .face {

           
        
            opacity: 1.0;
        


       
    backface-visibility: hidden;
        /* default: `visible` */

    }


    <div class="cube">

       <div class="face">front</div> 
        translateZ( 100px)

       <div class="face">back</div>  
        translateZ(-100px) rotateY(-180deg)

       <div class="face">left</div>  
        translateX(-100px) rotateY(-90deg)

       <div class="face">right</div> 
        translateX( 100px) rotateY( 90deg)

       <div class="face">top</div>   
        translateY(-100px) rotateX( 90deg)

       <div class="face">bottom</div>
        translateY( 100px) rotateX(-90deg)

    </div>

remember

this is not a 3D engine

there is no single coordinate system
there is no camera, light, etc.
complex scenes are hard to maintain
there are rendering order issues
hardware accelerated layers are not always good

by
Bartek Szopka
@bartaz