首页  >  文章  >  web前端  >  CSS3实现图片放大旋转_html/css_WEB-ITnose

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

WBOY
WBOY原创
2016-06-21 09:06:221538浏览

知识点:

    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);}

}

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

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

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

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

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

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

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn