How to interpret the properties Width, Height, Top, Left when using Transform?

Question

I am using Firefox Developer 74

When I change the height of a div without using the property transform : rotate, I have a predictable behavior as in the images below. Only the height is changed.

When I use the Rotate and try to change the height, the height and width are affected and also the top and left no longer have the 0 (zero) as the corner of the window..

What explanation for this?
Have some other way to rotate and get predictable behavior for top, left, height and width?

WITHOUT THE ROTATE:

USING THE ROTATE:

CODE EXAMPLE

.paginaDados{
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: left;
    z-index: 9000;
    background-color: white;
    overflow: scroll;
    height: 500px !important;
    width: 580px !important;
    padding-left: 50px;
    padding-right: 40px;       
}

<div id="paginaDados" class="paginaDados">
EFLouvoresCifras
Cadastro de Cifras
Localidade Padrão
Login

A Cidade Santa - A

Intro: A  B/A  Dm  A – A  Em  A  D/F#  G   Bm  A/C#  D –  F#m  E/G#  D/A  E4  E

 

    A            E/A        D            A

Dormindo no meu leito, em sonho encantador

         A/C#        D        B/D#         E   E/G#

Um dia eu vi   Jerusalém e o templo do Senhor.

   A          E/A          D             A

Ouvi cantar crianças e em meio a seu cantar

   A#°             E       B7          E     

Rompeu a voz dos anjos, do céu a proclamar.

    B7  B7/A      E/G#  A/C#      E/B   B7    E   E7

Rompeu   a voz  dos  an-jos,   do céu a proclamar:

 

 A     E      A   A/C#     D               A   B/D#

Jerusalém, Jerusalém,     cantai ó Santa Grei

E    E/D        A/C#  D        A/E     E4  E   A   E7

Hos ana, nas  altuuuuuras,  Ho-sana ao nosso Rei.

 

   A            C#m            D             A

Então o sonho se alterou, não mais o som feliz

       A/C#   D        B/D#        E E/G#

Ouvia  das  hosanas os coros infantis.

  F#m          C#m             D            A

O ar em tôrno se esfriou, no sol faltava a luz,

      A#°         E/B         B7            E

E num alto e tôsco monte vi o vulto de uma cruz!

      B       B/A    E/G#   A    E/B   B7    E    E7

E num alto e  tôsco  monte vi o vulto de uma cruz!

 

PONTE: F#/G# - G#7

 

  C#          D#m          C°            C#

Ainda a cena se mudou; surgia em resplendor

 A#m   A°     C#/G#     F#    G#/C     C#

A divi-nal    cidade, morada   do    Senhor.

   A#m        Fm               E         B/D#

Da lua não brilhava a luz, nem sol nascia lá,

     E     E/G#      A      F#m

Mas só fulgia   a    luz de Deus,

     E       E/D     A/C#  C#7

Mui pura  em seu brilhar.

  F#m     F#/F   F#m/E    D#Ø       D   Dm      A

E todos   que   queriam,  sim   , podiam la  entrar

    A    A°      E              B     B7     E

Na mui feliz   Jeru-salém, que nunca passa-rá.

    B      B/A    E/G#  A/C#      E/B   B7       E  E7

Na mui     feliz  Jerusalém, que nunca pa-ssa-  rá.
</div>

Answer 1

Forget rotate, the transform only changes the visual rendering of the element, but width continues to increase the width and height height. That is if you rotate the element 270deg and want to increase the width you need to increase the height!!!

Notice that the red border is the border-bottom !

'Cause even though you’re lying down your height is still your height, it’s not because you’re lying down your height has diminished you understand.

---

Now on to your answer

As I said to improve semantics and make it more intuitive use writing-mode: vertical-rl; this will leave your text upright. Then use transoform:scale(-1) this will make your text start at the bottom left corner.

See how it becomes more intuitive to control width and height with this technique, width continues to increase the width and the height the height

Code of the image above.

  .paginaDados{
    /* transform: rotate(270deg); */
    position: fixed;
    top: 0px;
    left: 0px;
    text-align: left;
    z-index: 9000;
    background-color: white;
    overflow: scroll;
    height: 500px !important;
    width: 580px !important;
    padding-left: 50px;
    padding-right: 40px;       
    /* coloca o texto na "vertical" */
    writing-mode: vertical-rl; 
    /* ajusta o texto para começar de "baixo para cima" no canto inferior esquerdo */
    transform: scale(-1);
}

<div id="paginaDados" class="paginaDados">
EFLouvoresCifras
Cadastro de Cifras
Localidade Padrão
Login

A Cidade Santa - A

Intro: A  B/A  Dm  A – A  Em  A  D/F#  G   Bm  A/C#  D –  F#m  E/G#  D/A  E4  E

 

    A            E/A        D            A

Dormindo no meu leito, em sonho encantador

         A/C#        D        B/D#         E   E/G#

Um dia eu vi   Jerusalém e o templo do Senhor.

   A          E/A          D             A

Ouvi cantar crianças e em meio a seu cantar

   A#°             E       B7          E     

Rompeu a voz dos anjos, do céu a proclamar.

    B7  B7/A      E/G#  A/C#      E/B   B7    E   E7

Rompeu   a voz  dos  an-jos,   do céu a proclamar:

 

 A     E      A   A/C#     D               A   B/D#

Jerusalém, Jerusalém,     cantai ó Santa Grei

E    E/D        A/C#  D        A/E     E4  E   A   E7

Hos ana, nas  altuuuuuras,  Ho-sana ao nosso Rei.

 

   A            C#m            D             A

Então o sonho se alterou, não mais o som feliz

       A/C#   D        B/D#        E E/G#

Ouvia  das  hosanas os coros infantis.

  F#m          C#m             D            A

O ar em tôrno se esfriou, no sol faltava a luz,

      A#°         E/B         B7            E

E num alto e tôsco monte vi o vulto de uma cruz!

      B       B/A    E/G#   A    E/B   B7    E    E7

E num alto e  tôsco  monte vi o vulto de uma cruz!

 

PONTE: F#/G# - G#7

 

  C#          D#m          C°            C#

Ainda a cena se mudou; surgia em resplendor

 A#m   A°     C#/G#     F#    G#/C     C#

A divi-nal    cidade, morada   do    Senhor.

   A#m        Fm               E         B/D#

Da lua não brilhava a luz, nem sol nascia lá,

     E     E/G#      A      F#m

Mas só fulgia   a    luz de Deus,

     E       E/D     A/C#  C#7

Mui pura  em seu brilhar.

  F#m     F#/F   F#m/E    D#Ø       D   Dm      A

E todos   que   queriam,  sim   , podiam la  entrar

    A    A°      E              B     B7     E

Na mui feliz   Jeru-salém, que nunca passa-rá.

    B      B/A    E/G#  A/C#      E/B   B7       E  E7

Na mui     feliz  Jerusalém, que nunca pa-ssa-  rá.

<br>
<br>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis sed nostrum quibusdam possimus, atque saepe aliquam repellat. Aperiam ratione, nobis minus, iure hic culpa possimus iusto at illum atque perferendis quisquam eveniet quod facere ad? Nam quod, fuga ea quae eaque dolores dolore esse fugiat eum soluta architecto neque sequi illo laborum tempora quam corporis animi deserunt distinctio nobis aliquid consectetur illum quisquam amet. Ducimus id, cupiditate quas vel officiis amet odio deserunt blanditiis. Quae iure enim eos temporibus perferendis beatae, quam, quis sit ipsa quos consequuntur ipsam nisi expedita quidem! Tempore quas, iusto minus velit nam sed! Id unde veniam quibusdam quisquam quas praesentium saepe incidunt nesciunt, inventore cupiditate nemo fuga commodi iste aliquid. Possimus voluptatibus, similique porro tenetur iste ducimus dignissimos aperiam cumque aliquid nobis ullam voluptate laboriosam, maiores alias molestias soluta, nostrum repellendus architecto mollitia eum laborum totam deleniti? Dolores voluptatem aspernatur voluptates exercitationem recusandae aut molestias, fugiat et quam officia culpa facere obcaecati nam reiciendis beatae at cupiditate doloremque maiores? Tenetur sapiente quaerat explicabo minima facilis. Impedit facilis quasi nam enim aspernatur ex ducimus vitae sapiente magni, ratione ea quibusdam voluptatem repellat animi, aliquid alias assumenda. Quod officia rerum nesciunt vero modi deserunt dolore iste minus mollitia inventore laboriosam assumenda repudiandae temporibus recusandae dolor voluptatum quisquam dolores earum porro facere velit, dicta in nihil. Sequi accusantium eius doloribus voluptatem harum consequatur molestias tenetur voluptatum at saepe dolores dicta aperiam recusandae deserunt quis omnis, magni perferendis dolorum exercitationem. Nemo corporis tenetur aperiam, et ratione, suscipit quibusdam debitis similique iste id, pariatur ipsum eaque asperiores minus nostrum deleniti voluptatem molestias dolore quasi? Natus ipsa molestias voluptatibus sit quidem eius repellat ad expedita! Iure saepe libero, corrupti placeat commodi aliquam. Quasi est omnis quod hic atque qui ab, veniam sequi deleniti repudiandae velit vero fuga facere doloremque quisquam eos.
</div>