不用JS如何实现翻转效果

更新: 2016-06-25 14:59 编辑:生活经验

用JS实现简单的翻转效果需要不少的代码,有的甚至还需要类库,太影响网站的打开速度。于是我想到了CSS3实现翻转效果,这样就可以用很少的代码实现该效果。

不用JS如何实现翻转效果

打开DW网页编辑器,代码已经提前测试好了,div代码如下所示,<div class="fanzhuan"></div>。

不用JS如何实现翻转效果

CSS样式代码如下所示,<style>.fanzhuan{width:300px;height:100px;display:block; line-height:100px;background:#f00;margin:300px auto; text-align:center;-webkit-transition:all 4s ease-in-out;}.fanzhuan:hover{-webkit-transform:rotate(360deg) scale(2,2);-o-transform:rotate(360deg) scale(2,2);-mo-transform:rotate(360deg) scale(2,2);transform:rotate(360deg) scale(2,2);}</style>

不用JS如何实现翻转效果

360度旋转是由css代码控制的,我们可以根据自己的需要改变度数,不过最好要兼容各个浏览器,加上-mo-(火狐)、-o-(欧朋)、-webkit-(谷歌)可更好的兼容浏览器。

不用JS如何实现翻转效果

保存一下代码,用浏览器打开,初始效果如下所示。

不用JS如何实现翻转效果

用鼠标移到上面,效果比初始效果扩大了四倍,当然这也是由代码控制的,代码如下所示,-o-transform:rotate(360deg) scale(2,2)。

不用JS如何实现翻转效果

共同分享,共同进步。