-1

When an object is rotated +180° everything inside it gets flipped so that it is still readable (I guess), I want to avoid that , how to do it?

untore
  • 603
  • 8
  • 16

1 Answers1

0

Just wrap your text in a div and rotate it with an opposite value of the degree that you assign to your parent div:

div.flipped {
    background: lightblue;
    padding-left: 150px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
}

div.noflipped {
    background: lightblue;
    padding-left: 150px;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
}

Demo: http://jsfiddle.net/uTGXx/7/

Eli
  • 14,779
  • 5
  • 59
  • 77
  • Your fiddle also demonstrates an application of over-riding inherited property values. Some novices may not notice that initially. – Marc Audet Apr 02 '13 at 10:54
  • you should always specify the non-prefixed version of a style (eg `transform`) as well as the prefixed versions (eg `-moz-transform`). – Spudley Apr 02 '13 at 13:55