无效的属性值CSS旋转

Question

I created a class and I am trying to rotate 45 degrees in CSS, but Chrome says "Invalid property value"

 .cr { background-color: #444; position: absolute; left: 5px; top: 13.5px; width: 20px; height: 3px; -o-webkit-transform: rotate(45deg); -o-moz-transform: rotate(45deg); -o-ms-transform: rotate(45); transform: rotate(45deg); } 

 <div class="cr"></div> 

Why is this happening??

Answer 1

You don't need the o-webkit.
o stands for Opera, webkit is the engine behind Chrome.

It's simply -webkit-transform: rotate(45deg);

Same with the moz prefix.

Answer 2

Correct is

/* Transform */
-webkit-transform:rotate(45deg);
   -moz-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
     -o-transform:rotate(45deg);
        transform:rotate(45deg);

Check out caniuse.com which prefixes are needed for which browsers or use a service like http://prefixmycss.com/ .

On caniuse.com click "Show all" to see more than the last few versions. You probably want to keep the Opera prefixes although it's not needed in recent versions but version 12 which is still quite popular requires them.

Even better would be an automation tool like grunt but that is out of scope for this question.