Kontrolle der Herkunft der Drehung in einer CSS auf der rechten Seite eines div verwandeln

Question

Wenn ich anwenden, diese Regel zu einem div (mit variablem Inhalt)

position: absolute; 
left: 0; 
top: 0; 
transform: rotate(90deg) translateY(-100%); 
transform-origin: 0 0 0; 

es von seiner oberen linken Ecke dreht und ‚hängt 'in der oberen linken Ecke des übergeordneten Elements. Es bewegt sich nicht, egal welche Größe die div

Wie kann ich das gleiche in der rechten Ecke, dh drehen Sie es so, dass es 'hängt' in der rechten Ecke des übergeordneten und dreht sich von oben links.

ist der Ausgangspunkt

position: absolute; 
right: 0; 
top: 0; 
transform: rotate(90deg); 
transform-origin: 100% 0 ; 

aber es klebt oben "und nicht‚nach unten hängt.‘

Ich kann natürlich verschieben mit right und top aber diese Werte sind unterschiedlich für unterschiedliche Größe des Inhalts.

Answer 1

Die Antwort ist, wie alle, wenn Sie wissen, sehr einfach. Dank Sahil, der mich dazu gebracht hat, mich in Codepen nachzubilden, ist es einfacher, das Problem zu sehen als auf einer Live-Seite voller Daten.

position: absolute; 
right: 0; 
top: 0; 
transform: rotate(90deg) translateX(100%); 
transform-origin: 100% 0 ; 

dh die Zugabe von translateX(100%); der Transformation