零基础学做网站培训介绍

当前位置:

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轴旋转的效果了。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 通过CSS样式可以控制网页中各个元素的显示方式,通过CSS样式可以在网页中画出一个三角形,圆形等形状。(了解更多CSS知识,请学习CSS视频教程)CSS
  • 什么是自适应网页随着网站浏览设备屏幕大小不同(包括PC,IPAD,手机等浏览设备),为了适应不同的屏幕,做网站制作时可以自动根据浏览网站的屏幕尺
  • 在实际网站制作过程,往往需要给一个列表添加项目序列编号,使数据给用户展现更加清楚。如下图:给一个列表添加这样的项目序列编号,我们可以
  • 我们在网上听音乐时,经常会看到一些音乐网站在播放音乐时,会有碟片旋转的效果,这是怎么做出来的呢?下面学做网站论坛就来分享一下如何制作旋转音乐
  • 在做网站时,为了让整个网站看起来更加动感,我们常常会在网站上放一些特效。例如,当鼠标经过时网站图片纵向Y轴旋转这个功能就是在很多网站上使用了