HTML/CSS
CSS3实现鼠标经过网站图片纵向Y轴旋转
PetitQ
做网站时，为了让整个网站看起来更加动感，我们常常会在网站上放一些特效。例如，当鼠标经过时网站图片纵向 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 轴旋转的效果了。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
