如何使用CSS让div模块旋转

本篇内容主要讲解“如何使用CSS让div模块旋转”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何使用CSS让div模块旋转”吧!

十载的额尔古纳网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。营销型网站建设的优势是能够根据用户设备显示端的尺寸不同，自动调整额尔古纳建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“额尔古纳网站设计”,“额尔古纳网站推广”以来，每个客户项目都认真落实执行。

问题：如何让你的一个div模块旋转？

代码如下:

看到这个问题，你会怎么解决呢，“旋转”嘛，动态的，当然用javascript来解决啦,诚然这样可以解决问题：在div中填写onmouseover=“round()”，然后编写script语句，实现操作-webkit-transform:rotate(值 deg)中的值嘛，setinterval重复调用改变值，然后让它不断转圈嘛。

但是还有更简单些的么，你看这样做的话，又要写script，又要加入新的指令，着实有些啰嗦，那还有什么更简单的办法呢？

其实，的确还有一种更简单的办法：css3，我们只需在设置样式的时候，这样做就可以了哦。

代码如下:

.rotate{width: 300px;height: 300px;background-color: red;-webkit-transition:-webkit-transform 1s;}
.rotate:hover{-webkit-transform:rotate(360deg);}

这里我们来看一下这段编码的关键点在哪，transition，就是它，w3c中对它的说明是“圆滑的用动画效果来改变CSS的属性值”，看吧，还是来对比装修前后的状态，不过装修前到装修后每段时间的变化都展现了，仿佛一帧加一帧就凑成了影片一样，这样的对比更像是一个变化的演绎，也就成了动态效果了，看吧，css未必然只能静态展示，同样可以动起来的哦。

到此，相信大家对“如何使用CSS让div模块旋转”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

当前标题：如何使用CSS让div模块旋转
网页URL：http://cqcxhl.cn/article/pdhdsp.html