js css3实现旋转效果

我前一章认识到了用css3做旋转的效果。现在，我将使用另一种方法来实现它，即js结合css3。现在我给大家看看上图的效果。

接下来，我将首先放入我的css代码。代码很简单：一个{ width:200px高度： 200 px；border:1px实心# adadadtransition:all 0.1s边界半径：50%；背景：url(images/1.jpg)无重复中心中心；背景尺寸：封面；margin:50px汽车；}上面的代码大家都能理解，就不介绍了。我将关注js的代码部分。

window . onload=function(){ var div=document . getelementsbyclassname(' one ')[0]；console . log(div)；setCss3(div，{transform:'rotate(10deg)'，' transform-origin ' : ' 50% 50% ' })var angel=0；setInterval(function(){ angel=8；设置css3 (div，{ transform : ' rotate(' angel ' deg)'，' transform-origin' 3360' 00'})，30)函数设置css3 (obj，objattr){//循环属性对象为(var I in objattr){ var new//判断是否有属性if (newi。indexof ('-') 0) {varnum=newi。indexof('-')；newi=newi . replace(newi . substr(num，2)，newi.substr(num 1，1)。toUpperCase())；}//考虑到css3的兼容性，这些属性必须加前缀。obj . style[new I]=Objattr[I]；newi=newi . replace(newi.charAt(0)，newi . charat(0)。toUpperCase())；obj . style[new I]=Objattr[I]；obj . style[' web kit ' newi]=Objattr[I]；obj . style[' moz ' newi]=Objattr[I]；obj . style[' o ' newi]=Objattr[I]；obj . style[' ms ' newi]=Objattr[I]；}}}这里我就说说相对的困难。

if(newi . indexof('-')0){ var num=newi . indexof('-')；newi=newi . replace(newi.substr(num，2)，newi . substr(num，2)。toUpperCase())；} newi=newi . replace(newi.substr(num，2)，newi . substr(num，2)。toUpperCase())；

这段代码实际上是将首字母变成大写

({transform:“旋转(10度)”、“transform-origin”:“0 0”))

因为在js中修改样式时没有像-webkit-transformz这样的格式，所以必须省略两个单词之间的“-”。第二个单词的字母是大写的，所以主要是处理完这个之后已经好长时间了。brspan style='color: #ff0000 '注意：1。因为如果不添加css3的过渡属性，旋转的时候会出现卡顿的效果，也就是旋转不流畅，所以我在这里添加了过渡属性。让他转身时看起来很平稳。br 2。如果transform-origin的值为0 0，它将围绕原点旋转，50%和50%将围绕中心点旋转。但是，默认情况下，它围绕中心点旋转。br/span是本文的全部内容。希望这篇文章的内容能给大家的学习或工作带来一些帮助，也希望大家多多支持我们！