höhe anpassen nach Rotate

[baeri]

Hallo,
ich habe ein Bild das wurde im Body mit max-height: 100% und max-width: 100% angepasst...

wenn ich das jetzt mit:

            .rotate {
                -webkit-transform: rotate(90deg);
                -moz-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                -o-transform: rotate(90deg);
                transform: rotate(90deg);

drehe, passt die höhe nicht mehr...

wie kann ich die höhe anpassen? eine height oder width in meiner klasse angeben hat nichts geholfen

 

[SpiceLab]

Ohne den übrigen Code, die Bilddimension (Breite/Höhe), sowie dessen Lage/Position im Dokument zu kennen, um den Fehler 1:1 reproduzieren zu können, tippe ich zunächst auf einen ungünstigen Drehpunkt (voreingestellt in der horizontalen u. vertikalen Mitte), sodass das Bild zum Teil aus dem Viewport verschwindet.

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
• http://www.html-seminar.de/css3-transform-origin.htm

 

[baeri]

evtl. hätte ich dazu schreiben sollen, dass das bild im "nachhinein" rotiert wird, da Javascript erst wissen muss OB das bild rotiert werden soll.

http://codepen.io/anon/pen/qbwewg
=> hier kann man gut sehen, dass der body eigentlich kleiner als das "dann rotierte bild" ist...

 

[SpiceLab]

=> hier kann man gut sehen, dass der body eigentlich kleiner als das "dann rotierte bild" ist...

Kein Wunder mit body {height:200px ...}!

 

[baeri]

ja... das war ja auch absicht, weil bei codepen das irgendwie komisch angezeigt wird, bei mir ist der body auf 100%...

allerdings wird bei mir nach der Rotation trotzdem oben und unten etwas abgeschnitten
=> zu deutsch, das Bild behält seine Größe bei... <- was bei rechteckigen Monitoren eben dann nicht ideal ist.

 

[SpiceLab]

Es bleibt dabei, was ich eingangs vermutet habe: das Bild wird durch den voreingestellten Drehpunkt bei der 90°-Rotation nach oben aus dem Viewport geschoben.

 

[baeri]

okay,... jetzt versteh ichs...
=> also haben wir das Problem gefunden...

wie kann ich das lösen?

 

[SpiceLab]

wie kann ich das lösen?

Das geht eigentlich aus meinen empfohlenen Links hervor: den voreingestellten Drehpunkt der Rotation korrigieren.

.rotate90 {
  ...
  transform-origin:50% 100%; /* Neuer Drehpunkt: 50% = X-Achse, 100% = Y-Achse */
  height:50%; /* Höhe herunterskalieren */
}

http://codepen.io/SpiceLab/pen/adrOzQ