CSS 3.0 rotate(90deg) is not a valid value for 'transform' property

Question

I'm trying to get the text to appear vertically in my list item. Several websites such as http://www.css3maker.com/text-rotation.html# have directed me to use the following: -ms-transform: rotate(90deg); /* IE 9 / -webkit-transform: rotate(90deg); / Chrome, Safari, Opera */ transform: rotate(90deg);

I've placed this in my css file, but visual studio 2010 provides the warnings:

1. Validation (CSS 3.0): 'rotate(90deg)' is not a valid value for the '-webkit-transform' property.
2. Validation (CSS 3.0): 'rotate(90deg)' is not a valid value for the 'transform' property

Why am I getting this warning? If I ignore it then it doesn't work, I don't get a warning for the -ms-transform, but it doesn't appear to work in IE anyway.

Here's my code: CSS:

li.menu_label > span
{
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
    transform: rotate(90deg);
}

HTML:

<ul id="nav">
    <li>
        <label class="menu_label" for="c1"> <span>Menu</span></label>
        <input type="checkbox" id="c1" />
</li>
</ul>

Turns out this was working regardless of the warnings, just not in google chrome. Needed to add "display: inline-block" CSS3 transform not working

Answer 1

I guess the problem is that your are using Visual Studio 2010 to validate your CSS code. Remember that VS2010 was launched probably by the end of 2009, and the rotate() property was added to IE9, released 2 years later. Therefore VS2010 is unaware of the existence of that property.

My suggestion is to either forget about validating your CSS with VS2010, or upgrade to the latest possible VS version.