CSS3实现图片放大旋转_html/css_WEB-ITnose

知识点：

css3动画

transition

/*旋转动画*/

@-webkit-keyframes rotation{

from {-webkit-transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);}

}

效果：

源码：

-----------------------

/*通用样式*/

*{margin: 0;padding: 0;}

/*自定义样式*/

.img{margin-left: 25px;margin-top: 50px;margin-right: 25px;

transition: all 2s ease;

}

.img:hover{

z-index: 10;

border: 1px dashed #ff0000;

-webkit-transform: rotateY(360deg);

transform: scale(1.51,1.51) rotate(360deg);

}

.ta_c{text-align: center;

width: 99%;

}

/*旋转动画*/

@-webkit-keyframes rotation{

from {-webkit-transform: rotate(0deg);}

to {-webkit-transform: rotate(360deg);}

}