CSS3 transition & transform

Quick CSS3 transition & transform demonstration

by Juan Muñoz

HTML

<div>
    Transition/transform is pretty cool (hover over me)
</div>

CSS

div { 
    background:#fcf8b3;
    border:1px solid #aaa;
    margin:10px;
    padding:10px;
    width:330px;
    /** 
     * I'll keep my CSS3 here at the end for demonstration purposes and 
     * because the vendor prefixes really clutter things up 
    **/
    -webkit-transition:-webkit-transform 0.2s ease-in-out;
       -moz-transition:-moz-transform 0.2s ease-in-out;
            transition:transform 0.2s ease-in-out;

}

div:hover {
    cursor:pointer;
    /* CSS3 */
    -webkit-transform:scale(1.2) rotate(-15deg) skew(-5deg, 30deg);
       -moz-transform:scale(1.2) rotate(-15deg) skew(-5deg, 30deg);
            transform:scale(1.2) rotate(-15deg) skew(-5deg, 30deg);
}