html - Is it possible to rotate element, but not its content with css3?

Question

I have the following element

<a href="#" class="some_class">Test Text Here</a>

and this element has light blue background and some padding. Today I came across one small challenge: I know we can rotate element, however its contents are also rotated. What I was trying to achieve looks like this:

So the element itself is slightly rotated, however its contents stay in place. Is this achievable just with CSS3? I tried playing around with several nested elements, however by rotating their parent element all child elements rotated as well. Also can this be done with single element, like example stated above?

Answer 1

Sure, If you wrap the text in a span, then set the span to position: absolute, and transform it the equal amount in the opposite direction to "default" it.

I would suggest against super-imposing the text over your link in your proposed case above, as you want the text to be INSIDE the anchor tag for SEO purposes.

So... I rotated <a> 10 degree's clockwise, and rotated the <span> 10 degree's counter-clockwise.

*****ALTERNATIVELY** - You could also set the span to display: block; and drop the absolute positioning. It depends on your use case. Absolute positioning it, in this case, would allow you to move the text around with a little more control.

http://jsfiddle.net/B95xa/

a {
    color: #fff;
    display: block;
    width: 100px;
    height: 30px;
    background: blue;
    border-radius: 5px;
    -moz-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}

span {
    position: absolute;
    -moz-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -webkit-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -o-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    -ms-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
    transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}