HTML Text rotieren

KaffeeFan · 25. Nov 2015

Hey Peoplezzz,

ich bin momentan dabei in HTML einen Text um 90Grad zu rotieren, dies klappt soweit auch, allerdings nur in Firefox, im IE wird der Text ohne Rotation angezeigt...

Gibt es eine Möglichkeit, dass der Text in allen Browsern mit Rotation angezeigt wird?

Gruß
Luk

Joose · 25. Nov 2015

Wie erzeugst du die Rotation? Falls du es per CSS erzeugt hilft dir vielleicht dieser Link https://msdn.microsoft.com/en-us/library/jj127312(v=vs.85).aspx

KaffeeFan · 25. Nov 2015

Habe es jetzt hinbekomme!
Habe einen Filter gesetzt, der es auch im IE dreht.
Dreht sich jetzt soweit in Firefox, im IE und im edge ebenfalls, das sollte erstmal reichen...

HTML:

<html>
  <style>
    #block{
      width:500px;
      height:500px;
      display:block;
      margin:auto;
      border: 1px solid #000;
      position:relative;
    }

    #text {
      -webkit-transform: rotate(90deg);
      -webkit-transform-origin: left top;
      -moz-transform: rotate(90deg);
      -moz-transform-origin: left top;
      -ms-transform: rotate(90deg);
      -ms-transform-origin: left top;
      -o-transform: rotate(90deg);
      -o-transform-origin: left top;
      transform: rotate(90deg);
      transform-origin: left top;

      position: absolute;
      top: 0;
      left: 100%;
      white-space: nowrap;   
      font-size: 48px;
     
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }
  </style>
  <div id="container">
    <p id="text">Rotier dich!!!</p>
  </div>
</html>

Trotzdem danke für deine Hilfe!

Gruß
Luk

HTML Text rotieren

KaffeeFan

Bekanntes Mitglied

Joose

Top Contributor

KaffeeFan

Bekanntes Mitglied

Aktuelle Jobs

Neue Themen

Ähnliche Themen