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