ZURÜCK

Text spiegeln mit CSS3

Mit CSS Transformation Texte spiegeln.

Tags: HTML, CSS3

Haben Sie schon einmal das "Copyleft"-Zeichen in einer HTML-Seite benötigt? Haben Sie dann UTF-8-Zeichentabellen durchstöbert um herauszufinden, dass es nicht enthalten ist?
Versuchen Sie die Text-Spiegelung mit CSS3:

© some rights reserved

Text-Spiegelung ist weniger gängig als Text-Rotation, wie sie z.B. durch Matthew's starbursts oder andere Seiten sinnvoll verwendet wird. Meist wird damit harmloser Schabernack getrieben, so wie hier. *

Benötigt wird lediglich etwas CSS:

.copyleft {
  transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  display: inline-block;
}

Dies kann im HTML wie folgt benutzt werden: 

<span class='copyleft'>&copy;</span> some rights reserved

Dadurch wird ein Text horizontal um -100% skaliert, wodurch er effektiv gespiegelt wird.

Anmerkung: Hier wird nicht mehr und nicht weniger als CSS benutzt – das bedeutet, dass es sich im Beispiel um ein Copyright-Zeichen handelt, das lediglich anders dargestellt wird. Weder eine Copyright- noch eine Copyleft-Verletzung sollte auf die leichte Schulter genommen werden.

* Die Transformation wird in älteren Browserversionen von Safari und dem Internet Explorer nicht unterstützt.