如何使用 JavaScript 访问 CSS3 的“转换”属性？答案

【问题标题】：How to access the "transform" attribute of CSS3 with JavaScript?如何使用 JavaScript 访问 CSS3 的“转换”属性？
【发布时间】：2013-10-09 23:38:04
【问题描述】：

如何使用 JavaScript 访问 CSS“转换”属性？我试过了，但它不允许我：

function hoverFun(x)
{
x.style.opacity="1";
x.style.transform="rotate(180deg)";
x.style.cursor="pointer";
}

它无法识别“旋转（180 度）”。我该怎么办？我应该如何输入？请帮忙！

【问题讨论】：

使用 jQuery 你可以使用 .css() 选择器，可能会解决你的问题。

标签： javascript html css rotation transform

【解决方案1】：

你只需要 CSS3：

http://jsfiddle.net/SzMmT/2/

.box
{
    width: 100px;
    height: 100px;
    background: blue;
    opacity: 0.7;
}
.box:hover
{
    transition: 1s;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    cursor: pointer;
    opacity: 1;
}

【讨论】：

考虑到他想做的就是在悬停时旋转它，这肯定比使用javascript更好。

【解决方案2】：

CSS 属性转换仍然是一个工作草案（W3C 草案 - http://dev.w3.org/csswg/css-transforms/），因此您需要为目标浏览器使用浏览器前缀。例如：

x.style.webkitTransform="rotate(180deg)"; // webkit based browsers (Chrome, Safari, etc.)
x.style.mozTransform="rotate(180deg)"; // mozilla based browsers (Firefox)
x.style.msTransform="rotate(180deg)"; // Internet Explorer
x.style.oTransform="rotate(180deg)"; // Opera
x.style.transform="rotate(180deg)"; // support for future standard

【讨论】：