4种CSS3效果(360度旋转、旋转放大、放大、移动)

旋转：

* {
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
*:hover {
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
}

 

放大：

* {
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
*:hover {
    transform:scale(1.2);
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -o-transform:scale(1.2);
    -ms-transform:scale(1.2);
}

 

放大旋转
* {
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
*:hover {
    transform:rotate(360deg) scale(1.2);
    -webkit-transform:rotate(360deg) scale(1.2);
    -moz-transform:rotate(360deg) scale(1.2);
    -o-transform:rotate(360deg) scale(1.2);
    -ms-transform:rotate(360deg) scale(1.2);
}

 

上下左右移动：
* {
    transition:All 0.4s ease-in-out;
    -webkit-transition:All 0.4s ease-in-out;
    -moz-transition:All 0.4s ease-in-out;
    -o-transition:All 0.4s ease-in-out;
}
*:hover {
    transform:translate(0,-10px);
    -webkit-transform:translate(0,-10px);
    -moz-transform:translate(0,-10px);
    -o-transform:translate(0,-10px);
    -ms-transform:translate(0,-10px);
}