今天小编跟大家讲解下有关仅用CSS让你的div模块旋转 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关仅用CSS让你的div模块旋转 的相关资料，希望小伙伴们看了有所帮助。
html语言编写 div或者table布局 css设置样式 javascript设置响应 交互 这就是我最初印象中网页最基础最原始的存在 于是在这里就给css定了性 设置样式：样式嘛 就好像是装修的效果 只有最初的原始状态和装修后的状态 都是静态的 哪怕存在一个hover 也不过是对比之前之后的状态而已 却不曾想 今天碰到的这个解决办法让我又深深的震撼了一把。 问题：如何让你的一个div模块旋转 复制代码代码如下: <span style="font-size:12px;"><div id="rotate"style="backgroun:red;width:300px;height:300px;"><div></span> 看到这个问题 你会怎么解决呢 “旋转”嘛 动态的 当然用javascript来解决啦,诚然这样可以解决问题：在div中填写onmouseover=“round()” 然后编写script语句 实现操作-webkit-transform:rotate(值 deg)中的值嘛 setinterval重复调用改变值 然后让它不断转圈嘛。 但是还有更简单些的么 你看这样做的话 又要写script 又要加入新的指令 着实有些拢腔褂惺裁锤虻サ陌旆兀 其实 的确还有一种更简单的办法：css3 我们只需在设置样式的时候 这样做就可以了哦。 复制代码代码如下: <span style="font-size:12px;">.rotate{width: 300px;height: 300px;background-color: red;-webkit-transition:-webkit-transform 1s;} .rotate:hover{-webkit-transform:rotate(360deg);}</span> 这里我们来看一下这段编码的关键点在哪 transition 就是它 w3c中对它的说明是“圆滑的用动画效果来改变CSS的属性值” 看吧 还是来对比装修前后的状态 不过装修前到装修后每段时间的变化都展现了 仿佛一帧加一帧就凑成了影片一样 这样的对比更像是一个变化的演绎 也就成了动态效果了 看吧 css未必然只能静态展示 同样可以动起来的哦。来源：爱蒂网
