效果一：360°旋转修改rotate(旋转度数)
* {
transition: All0.4sease-in-out;
-webkit-transition: All0.4sease-in-out;
-moz-transition: All0.4sease-in-out;
-o-transition: All0.4sease-in-out;
}
*:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
效果二：放大修改scale(放大的值)
* {
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);
}
效果三：旋转放大修改rotate(旋转度数)scale(放大值)
* {
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);
}
效果四：上下左右移动修改translate(x轴,y轴)
* {
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);
}
开胜简介