CODEWITHSUNDEEP
htmlcss
Ilja
Ilja

Reputation: 46479

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

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:

enter image description here

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?

Upvotes: 19

Views: 30014

Answers (2)

Michael
Michael

Reputation: 7092

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

Upvotes: 21

km6zla
km6zla

Reputation: 4877

You have 2 options that I am aware of:

  1. Make them separate elements and just rotate the background image/div. This method would work if you need to animate the rotation.
  2. If you are using an image, save the background image as pre-skewed.

Upvotes: 0

Related Questions