做网站时，为了让整个网站看起来更加动感，我们常常会在网站上放一些特效。例如，当鼠标经过时网站图片纵向 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 轴旋转的效果了。
