1

Estou utilizando o Firefox Developer 74

Quando eu altero o height de uma div sem usar a propriedade transform : rotate, tenho um comportamento previsível como nas imagens abaixo. Apenas a altura é alterada.

Quando eu utilizo o rotate e tento alterar o height, a altura e largura são afetados e também o top e left deixam de ter o 0 (zero) como o canto da window..

Qual explicação pra isto?
Tem alguma outra forma de rotacionar e obter um comportamento previsível para top, left, height e width?

SEM O ROTATE:

Tamanho 1 sem o rotate

Tamanho 2 sem o rotate

USANDO O ROTATE:

Tamanho 1 usando o rotate

Tamanho 2 usando o rotate

CODIGO EXEMPLO

.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>

1 Resposta 1

2

Esquece rotate, o transform só muda a renderização visual do elemento, mas width continua aumentando a largura e height a altura. Ou seja se vc rotacionar o elemento 270deg e quiser aumentar a largura vc precisa aumento o height!!!

Repare que a borda vermelha é o border-bottom !

inserir a descrição da imagem aqui

Pois mesmo vc estando deitado a sua altura ainda é a sua altura, não é pq vc está deitado que a sua altura diminuiu entende.


Agora sobre a sua resposta

Como falei para melhora a semântica e deixar mais intuitivo use writing-mode: vertical-rl; isso vai deixar o seu texto na vertical. Depois use transoform:scale(-1) isso vai fazer o seu texto começar no canto inferior esquerdo.

Veja como fica mais intuitivo controlar a largura e altura com essa técnica, width continua aumentando a largura e o height a altura

inserir a descrição da imagem aqui

Código da imagem acima.

  .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>

2
  • 1
    Excelente, é exatamente o que preciso. Obrigado!
    – Souza
    Commented 22/02/2020 às 18:17
  • @Souza sem problemas amigo
    – hugocsl
    Commented 22/02/2020 às 18:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .