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

WBOY
发布: 2016-06-21 09:06:22
原创
1537 人浏览过

知识点:

    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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!