本篇内容主要讲解“如何使用CSS让div模块旋转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何使用CSS让div模块旋转”吧!
问题:如何让你的一个div模块旋转?
代码如下:
<span ><div id="rotate" ><div></span>
看到这个问题,你会怎么解决呢,“旋转”嘛,动态的,当然用javascript来解决啦,诚然这样可以解决问题:在div中填写onmouseover=“round()”,然后编写script语句,实现操作-webkit-transform:rotate(值 deg)中的值嘛,setinterval重复调用改变值,然后让它不断转圈嘛。
但是还有更简单些的么,你看这样做的话,又要写script,又要加入新的指令,着实有些啰嗦,那还有什么更简单的办法呢?
其实,的确还有一种更简单的办法:css3,我们只需在设置样式的时候,这样做就可以了哦。
代码如下:
<span >.rotate{width: 300px;height: 300px;background-color: red;-webkit-transition:-webkit-transform 1s;}
.rotate:hover{-webkit-transform:rotate(360deg);}</span>
这里我们来看一下这段编码的关键点在哪,transition,就是它,w3c中对它的说明是“圆滑的用动画效果来改变CSS的属性值”,看吧,还是来对比装修前后的状态,不过装修前到装修后每段时间的变化都展现了,仿佛一帧加一帧就凑成了影片一样,这样的对比更像是一个变化的演绎,也就成了动态效果了,看吧,css未必然只能静态展示,同样可以动起来的哦。
到此,相信大家对“如何使用CSS让div模块旋转”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!