A very short introduction to CSS3D transforms

by
Bartek Szopka @bartaz

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(-100px)
                
            
            
                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


        .scene {

               
            
            
            perspective:
                1000px
            
            ;
            

               
            perspective-origin: 50% 50%;

        }
        

        .box {

               
            transform:
            
            
                perspective(600px)
                
            
            
            

        }

front

back

left

right

top

bottom


            .cube { 

               
            transform: 
            
                
                    perspective(600px)
                    
                
                

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

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

            }


            
            
            .face {

                   
                
                    opacity: 0.5;
                

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

            }


            <div class="cube">

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

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

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

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

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

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

            </div>

Remember

It 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

demos

...but, you can build interesting stuff

SnowStack Gallery, Apple CSS3 Transitions Showcase, 3D Sphere, CSS 3D FPS Concept, Pure CSS 3D City, and many more...

wanna learn more?

Intro to CSS 3D, Understanding CSS 3D, Adventures in 3rd dimension, Safari Guide to CSS transforms, W3C CSS 3D Transforms Module

by
Bartek Szopka @bartaz