Question

我想使用CSS3动画效果连续旋转HTML5图像或div。需要javascript来执行与此相关的所有基本功能：

1）设置图像的旋转速度。

2）获取当前旋转值，单位为度。

3）开始和停止旋转。

如果可能，请提供html，css，js的工作示例。一个js课很可爱。非常感谢。

Answer 1

以下是您要求的一些功能的工作示例。不存在的功能非常容易实现。

这是一个非常基本的实现。

请在codepen.io上运行，否则样式表引用将无效。

http://codepen.io/chocobowings/full/qOOzry/

＆＃13;

//console.log(document.styleSheets[2]);
// find the right style sheet //
var rule = document.styleSheets[2].cssRules[1];
//console.log(rule);

function change(){
  // first remove the old rules //
rule.deleteRule("0%");
rule.deleteRule("100%");

var angle1 = "-360deg"
var angle2 = "720deg"
// then add new rules //
rule.appendRule("0% { border-radius:0%; transform: rotate("+ angle1 + ");}");
rule.appendRule("90% { border-radius:30%; transform: rotate("+ angle2 + ");}");
  
  // log the variable after the changes //
 // console.log(rule);
 
 // log the rules new text // 
// you can extract from the cssText any information that you need 
 // console.log(rule.cssRules[0].cssText);
 // console.log(rule.cssRules[1].cssText);
}
function get()
{
//console.log(document.styleSheets[2]);
var el = document.getElementById("a");
var st = window.getComputedStyle(el, null);
var tr = st.getPropertyValue("-webkit-transform") ||
         st.getPropertyValue("-moz-transform") ||
         st.getPropertyValue("-ms-transform") ||
         st.getPropertyValue("-o-transform") ||
         st.getPropertyValue("transform") ||
         "FAIL";

// With rotate(30deg)...
// matrix(0.866025, 0.5, -0.5, 0.866025, 0px, 0px)
console.log('Matrix: ' + tr);

// rotation matrix - http://en.wikipedia.org/wiki/Rotation_matrix

var values = tr.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var c = values[2];
var d = values[3];

var scale = Math.sqrt(a*a + b*b);

console.log('Scale: ' + scale);

// arc sin, convert from radians to degrees, round
var sin = b/scale;
// next line works for 30deg but not 130deg (returns 50);
// var angle = Math.round(Math.asin(sin) * (180/Math.PI));
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));

console.log('Rotate: ' + angle + 'deg');

}

＆＃13;

.a {
  background-color: #344565;
  width: 500px;
  height: 500px;
  position: absolute;
  left:30vw;
  top: 30vh;
  animation: move 20s infinite;
}
@keyframes move {
  0% {
    border-radius:0%;
    transform: rotate(360deg);
  }
     100% {
    border-radius:30%;
    transform: rotate(-720deg);
  }
}

＆＃13;

<button onclick="change()">Change Values</button>
<button onclick="get()">Get Angle</button>
<div class="a" id="a">
  </div>

＆＃13;

控制CSS旋转动画：获取，设置，启动，停止

1 个答案: