简体   繁体   中英

How to access the “transform” attribute of CSS3 with JavaScript?

How can I access the CSS "transform" attribute using JavaScript? I tried this but it didn't allow me:

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

It doesn't recognize "rotate(180deg)". What should I do? How should I type it? Help please!

You just need CSS3 for this:

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;
}

The CSS property transform is still a working draft (W3C Draft - http://dev.w3.org/csswg/css-transforms/ ), so you will need to use browser prefix's for the browsers you are targeting. For example:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM