如何css给同一对象先后设置两次不同的transform-origin并执行两次不同的旋转

html-css019

如何css给同一对象先后设置两次不同的transform-origin并执行两次不同的旋转,第1张

原点设置一次即可,不需要多次设置,只要在转180度以后,再次旋转180度(也就是从180度转到360度)即可,继续累加就继续转(可以超过360度)。比如:

<style>

div {

   position:absolute

   left:200px

   top:200px

   transform-origin:-30px center

   transition:all 1s

}

</style>

<button>旋转180度</button>

<div>文字A</div>

<script>

var jd=0

window.onload=function(){

   document.querySelector("button").onclick=function(){

      jd+=180

      document.querySelector("div").style.transform="rotate("+jd+"deg)"

   }

}

</script>

首先给ul取名为 class="ultest"(随便写的)

var ultestItem = $('.ultest li'),

liitemLen = ultestItem.length,

linesItem = 4//定义几个一种颜色

var colorbg//颜色初始化

for (var i = 0i <Math.floor(liitemLen/linesItem)i++) {

switch(i){

case 0: colorbg = "red"break

case 1: colorbg = "black"break

case 2: colorbg = "gray"break

case 3: colorbg = "yellow"break

}

for (var j = 0j <linesItemj++) {

$(ultestItem[(i*linesItem+i)]).css("background", colorbg)

}

}

因为是这样的

你的css对hover的设定是#button a:hover 也就是id为button内的<a>超链

但是你真正想实现效果的是button

所以应该这么写css:

#button:hover

也就是#button的hover 而不是a的hover

:)