善恶资源网专注优秀技术教程分享网-傅汉松!

CSS3实现鼠标经过网站图片纵向Y轴旋转

傅汉松 技术教程

汉松出品|资源介绍

傅汉松本次为大家分享的是CSS3实现鼠标经过网站图片纵向Y轴旋转

傅汉松

在做网站时,为了让整个网站看起来更加动感,我们常常会在网站上放一些特效。例如,当鼠标经过时网站图片纵向Y轴旋转这个功能就是在很多网站上使用了。下面学做网站论坛就来介绍一下制作方法。

实现这个功能很简单,通过CSS3的动画属性就可以了。

HTML代码:

<div id="fourmain">
<ul class="clearfix w1200">
<li>
<div class="fleft">
<h3>全程免费</h3>
<span>免费提供工程设计报价服务</span>
</div>
<img src="<?php bloginfo('template_directory'); ?>/static/picture/icon_tp_01.png" class="fright" />
</li>

<li>
<div class="fleft">
<h3>一线品牌</h3>
<span>采用大品牌供货商,货真价实</span>
</div>
<img src="<?php bloginfo('template_directory'); ?>/static/picture/icon_tp_02.png" class="fright" />
</li>

<li>
<div class="fleft">
<h3>20项施工工艺</h3>
<span>行业内独有版权的特色工艺</span>
</div>
<img src="<?php bloginfo('template_directory'); ?>/static/picture/icon_tp_03.png" class="fright" />
</li>

<li>
<div class="fleft">
<h3>0增项</h3>
<span>价格、材料,施工标准透明</span>
</div>
<img src="<?php bloginfo('template_directory'); ?>/static/picture/icon_tp_04.png" class="fright" />
</li>
</ul>
</div>

CSS3代码:

#fourmain li:hover img{
cursor: pointer;
-webkit-transform: rotate3d(0,1,0,360deg);
-moz-transform: rotate3d(0,1,0,360deg);
transform: rotate3d(0,1,0,360deg);
transition: -webkit-transform 0.8s ease-in-out;
transition: -moz-transform 0.8s ease-in-out;
transition: transform 0.8s ease-in-out;
}

通过hover结合transform就可以制作出鼠标经过网站图片纵向Y轴旋转的效果了。


标签: 暂无标签

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail:321976193@qq.com

同类推荐
评论列表

技术教程 CSS3实现鼠标经过网站图片纵向Y轴旋转
在做网站时,为了让整个网站看起来更加动感,我们常常会在网站上放一些特效。例如,当鼠标经过时网站图片纵向Y轴旋转这个功能就是在很多网站上使用了。下面学做网站论坛就...
扫描二维码阅读原文
QQ娱乐网 January, 01
生成社交图 ×
    87.78ms