Monday, 12 May 2014

2D CSS3 Transitions and Transforms

I have written a few examples of 2D CSS3 transitions and transforms for future reference. I will firstly cover single transitions and transforms on a single element. Then move onto multiple transitions and transforms on a single element.

I have used a template HTML structure with inline CSS styles for demonstrational purposes shown below. The styles should ideally be placed in a separate CSS file. The effects will be added onto the hover state on the div’s

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>2D 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;}   
    </style>
    
</head>
<body>
    <div class="box box1"><p>Colour Change</p></div>
    <div class="box box2"><p>Opacity</p></div>
    <div class="box box3"><p>Scale</p></div>
    <div class="box box4"><p>Rotate</p></div>
    <div class="box box5"><p>Colour and opacity</p></div>
</body>
</html>

To create a transition for changing the background colour, I have used the background-color property to smoothly change the colour.
.box1{
    background-color: #ff0000;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    -ms-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
    transition: background-color 1s ease;
}     

.box1:hover{
    background-color: #ffff00;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    -ms-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
    transition: background-color 1s ease;
}   
The opacity can be transitioned in the same way as the background-color using the opacity value.
.box2{
   opacity: 1;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -ms-transition: opacity 1s ease-out;
    -o-transition:opacity 1s ease-out;
    transition: opacity 1s ease-out;
}     

.box2:hover{
   opacity:0.3;
    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -ms-transition: opacity 1s ease-out;
    -o-transition:opacity 1s ease-out;
    transition: opacity 1s ease-out;
}    
The scaling uses the transform property instead of the transition. This will increase the size upon hovering over the div. The webkit-backface-visibility property is added to remove any glitches with the webkit browsers.
.box3{
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition:all 1s ease-out;
    transition: all 1s ease-out;
} 

.box3:hover{
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    -ms-transform: scale(1.25);
    -o-transform: scale(1.25);
    transform: scale(1.25);
    -webkit-backface-visibility: hidden; 
}        

.box4{
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    -o-transition:all 1s ease-out;
    transition: all 1s ease-out;
}

.box4:hover{
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform: rotate(360deg);
} 
Multiple properties are added in the same way as single properties.
.box5{
    background-color: #ff0000;
    opacity: 1;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    -ms-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
    transition: background-color 1s ease;

    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -ms-transition: opacity 1s ease-out;
    -o-transition:opacity 1s ease-out;
    transition: opacity 1s ease-out;
}     

.box5:hover{
    background-color: #00ff00;
    opacity:0.3;
    -webkit-transition: background-color 1s ease;
    -moz-transition: background-color 1s ease;
    -ms-transition: background-color 1s ease;
    -o-transition: background-color 1s ease;
    transition: background-color 1s ease;

    -webkit-transition: opacity 1s ease-out;
    -moz-transition: opacity 1s ease-out;
    -ms-transition: opacity 1s ease-out;
    -o-transition:opacity 1s ease-out;
    transition: opacity 1s ease-out;
}  

0 comments:

  COPYRIGHT © 2014 · ILIKE2FLASH · Theme by Ourblogtemplates

Back to TOP