Saturday, 17 May 2014

3D CSS3 transitions and transforms

These are 3D examples of CSS3 transitions and transforms continuing on from the last post with 2D examples. I have again used the template HTML structure with inline style. This time I have included the container class in the styles. We are using 3D, so the perspective class will be added to the container. I have used the value of 1000 to prevent distortion on screen. Again the transitions and transforms effects are added to the hover state of the div.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3D CSS3 transitions and transforms</title>
    
    <style>
    body{padding:0; margin:0;}
    p{padding:0; margin:0; text-align: center; position: relative; top:110%;}
    .box{width:150px; height:150px; background-color: #ff0000; display: inline-block; margin:0 50px 50px 0;}   

    .container{
       -webkit-perspective: 1000; 
       -moz-perspective: 1000; 
       -o-perspective: 1000; 
       perspective: 1000; 
    }        

</head>
<body>

<div class="container">
    <div class="box box1"><p>3D Scale</p></div>
    <div class="box box2"><p>Rotate Y</p></div>
    <div class="box box3"><p>Rotate X</p></div>
    <div class="box box4"><p>Rotate Z</p></div>
    <div class="box box5"><p>3D Rotate</p></div>
</div>

</body>
</html>
This example scales up the div with the scale3d transform property and reduces the opacity. The scale3d has three parameters: x, y, and Z.
.box1{
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
}     

.box1:hover{
    -webkit-animation:scaleup 1s ease-out forwards;
    -moz-animation:scaleup 1s ease-out forwards;
    -o-animation:scaleup 1s ease-out forwards;
     animation:scaleup 1s ease-out forwards;
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -o-backface-visibility:hidden;
    backface-visibility:hidden;
}  

@-webkit-keyframes scaleup{
    0%{opacity: 1;}
    100%{opacity: 0; -webkit-transform: scale3d(2,2,2);}
}    
@-moz-keyframes scaleup{
    0%{opacity: 1;}
    100%{opacity: 0; -moz-transform: scale3d(2,2,2);}
}    
@-o-keyframes scaleup{
    0%{opacity: 1;}
    100%{opacity: 0; -o-transform: scale3d(2,2,2);}
}    
keyframes scaleup{
    0%{opacity: 1;}
    100%{opacity: 0; transform: scale3d(2,2,2);}
}            
The next three examples rotate the div around the x,y and z-axis.
.box2{
    -webkit-transition:-webkit-transform 1s ease;
    -moz-transition:-moz-transform 1s ease;
    -o-transition:-o-transform 1s ease;
    transition:transform 1s ease; 
} 
        
.box2:hover{
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    -o-transform:rotateY(-180deg);
    transform:rotateY(-180deg);    
}
        
.box3{
    -webkit-transition:-webkit-transform 1s ease;
    -moz-transition:-moz-transform 1s ease;
    -o-transition:-o-transform 1s ease;
    transition:transform 1s ease; 
} 
        
.box3:hover{
    -webkit-transform:rotateX(-180deg);
    -moz-transform:rotateX(-180deg);
    -o-transform:rotateX(-180deg);
    transform:rotateX(-180deg);    
}         

.box4{
    -webkit-transition:-webkit-transform 1s ease;
    -moz-transition:-moz-transform 1s ease;
    -o-transition:-o-transform 1s ease;
    transition:transform 1s ease; 
} 
        
.box4:hover{
    -webkit-transform:rotateZ(360deg);
    -moz-transform:rotateZ(360deg);
    -o-transform:rotateZ(360deg);
    transform:rotateZ(360deg);    
}         
The final example rotates in 3D and the parameters are x, y, z and angle.
.box5{
    -webkit-transition:-webkit-transform 1s ease;
    -moz-transition:-moz-transform 1s ease;
    -o-transition:-o-transform 1s ease;
    transition:transform 1s ease; 
} 
        
.box5:hover{
    -webkit-transform:rotate3d(1,0,1, 360deg);
    -moz-transform:rotate3d(1,0,1, 360deg);
    -o-transform:rotate3d(1,0,1, 360deg);
    transform:rotate3d(1,0,1, 360deg); 
} 

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP