Question

情况：

div.xy:hover {
  transform: all rotate(360deg);
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
}

问题：
我需要检索 360 ，我可以显示并更改它。需要一些帮助我走向360的道路有什么想法吗？

Answer 1

我相信document.getElementById('XYZ').style.WebkitTransform会在WebKit浏览器中返回"rotate(360deg)"。您可以将style.MozTransform用于Firefox 3.1 +，style.msTransform用于IE9 +，style.OTransform用于Opera。

来源：http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html

使用鼠标事件绑定元素：

var e = document.getElementById('test') // Your div ID

e.onmouseover = function(){
    var degree = 360; // Rotation on :hover
    e.style.WebkitTransform = 'rotate(' + degree + 'deg)';
    e.style.MozTransform = 'rotate(' + degree + 'deg)';
    e.style.OTransform = 'rotate(' + degree + 'deg)';
    e.style.msTransform = 'rotate(' + degree + 'deg)';
    e.style.transform = 'rotate(' + degree + 'deg)';
}
e.onmouseout = function(){
    var degree = 0; // Initial rotation
    e.style.WebkitTransform = 'rotate(' + degree + 'deg)';
    e.style.MozTransform = 'rotate(' + degree + 'deg)';
    e.style.OTransform = 'rotate(' + degree + 'deg)';
    e.style.msTransform = 'rotate(' + degree + 'deg)';
    e.style.transform = 'rotate(' + degree + 'deg)';
}

使用jQuery可能更简单，但你必须知道你的JavaScript根源！

Answer 2

你需要jQuery，但它可能就是你要找的......

$(document).ready(function(){

$(".xy:hover").css("transform")


});

这将值作为字符串返回。您可能应该检查它是否返回360deg或整个事物。删除jQuery和CSS的div。对于jQuery来说，更快不要调用它，而在CSS中它不会增加特异性。

如何使用Javascript检索伪元素变换样式值？

2 个答案: