• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Buchstabe spiegeln

F

Flo_sbg

Neues Mitglied
Hallo,

Ich bin ganz neur hier im Forum und habe folgende Problemstellung.
Würde geren im HTML einen Buchstaben spiegeln. Also folgendes Beistpiel. Bei meinem Namen FLORIAN würde ich das R spiegeln. Könnt ihr mir bitte einen Tipp geben, wie ich das einfach umsetzen kann.

Vielen Dank im Vorraus.
Flo
 
Werbung:
Ich würde es so machen:
HTML: 
<p>FLO<span class="mirror">R</span>IAN</p>

und eben eine CSS-Klasse mit transform wie es schon @threadi erwähnt hatte:
Scale bietet sich da an, mit was für Werten du es aufrufen musst, findest du bestimmt auch raus ;)
Code: 
.mirror {
    display: inline-block;
    -webkit-transform: scale();
            transform: scale();
}
 
Werbung:
Das funktioniert super!!! Jetzt habe ich noch eine Frage wie ich das ganze in mein Navibereich einbinden kann. Zum Beispiche ich möchte das B im Wort NAVIBERICH spiegeln.

Im CSS File wurde auch bereits die Class aktiv, Hover, a und a aktiv definiert. Jetzt ist meine Frage wie ich das mit dem spiegeln hier einbinden kann, bzw. was die schönste Lösung ist. Mir ist nicht klar ob ich beim class="aktiv"> noch die class="mirror" miteinbinden kann.

<div id="navibereich">

<ul>
<li><a href="navibereich1.html" title="NAVIBEREICH 1" class="aktiv">NAVIBEREICH 1</a></li>
<li><a href="navibereich2.html" title="NAVIBEREICH 2">NAVIBEREICH 2</a></li>

</ul>
</div>
 
Du willst ja nur den einen Buchstaben spiegeln also ja mach:
Code: 
<a href="LINK">A<span class="mirror">B</span>C</a>

Und noch nebenbei du kannst auch mehrere Klassen zuweisen:
Code: 
<a class="aktiv mirror">ABC</a>
Hierbei würde der komplette link gespiegelt..
 
Der Thread-Ersteller hat ja scheinbar die Werte herausgefunden,
für alle anderen:
Code: 
-webkit-transform: scale(-1, 1);
        transform: scale(-1, 1);
 
Werbung:
Leider funkt es noch nicht ganz, weiß aber nicht was ich falsch mache. Möchte ja nur das B verkehrt rum haben.

<div id="navibereich">

<ul>
<li><a href="navibereich1.html" title="NAVIBEREICH 1" class="aktiv">NAVI<span class="mirror"B</span>EREICH 1</a></li>
<li><a href="navibereich2.html" title="NAVIBEREICH 2">NAVI<span class="mirror"B</span>EREICH 1</a>
</li>

</ul>
</div>

Dann sieht das ganze aber wie im Anhang aus ;-)
 

Anhänge

  • Bildschirmfoto 2014-10-22 um 17.15.10.png
    Bildschirmfoto 2014-10-22 um 17.15.10.png
    11,5 KB · Aufrufe: 9
Sorry bin gerade etwas auf der Leitung gestandne, jetzt hab ich es ;-)

<li><a href="navibereich2.html" title="NAVIBEREICH 2">NAVI<span class="mirror">B</span>EREICH 2</a>

Vielen Dank für eure Hilfe!!!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben