Why the rotate does not work on chrome

I think i need to rebrand this blog as a general web development blog.
The case today is about the css property to rotate an element, for good measure this is the code for all browsers to rotate elements

#yourelement {
  -moz-transform: rotate(180deg)
  -o-transform: rotate(180deg) 
  -webkit-transform: rotate(180deg)
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos(180deg)}, M12=-#{sin(180deg)}, M21=#{sin(180deg)}, M22=#{cos(180deg)})
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos(180deg)}, M12=-#{sin(180deg)}, M21=#{sin(180deg)}, M22=#{cos(180deg)})"
  zoom: 1
} 

So thats the code to rotate an element 180 degrees, i used it to rotate a bang ! sing because in spanish you need the rotated version to start a sentence.
If chrome refuses to work using this line

-webkit-transform: rotate(10deg);

You are probably tring to target an inline element, this could be a inline element by default so i solved my problem enveloping what i wanted to rotate in a div, and setting its display property to inline.
And thats it. have fun! 
UPDATE:
The sass mixing to rotate an element

@mixin rotate($degrees)
  -moz-transform: rotate($degrees)
  -o-transform: rotate($degrees) 
  -webkit-transform: rotate($degrees)
  filter:  progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=#{cos($degrees)}, M12=-#{sin($degrees)}, M21=#{sin($degrees)}, M22=#{cos($degrees)})"
  zoom: 1

And you would use it like this

@include rotate(90deg)

Dont forget to import them if you have the mixins in another file!