0

Tenho o seguinte script

var graus = 0;
$(document).on('click','img',function(){
  graus = (graus+90);
  if(graus>350) graus = 0
  $(this).css({
    "-webkit-transform": "rotate("+graus+"deg)",
    "-moz-transform": "rotate("+graus+"deg)",
    "transform": "rotate("+graus+"deg)"
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/200x100.png?text=imagem">

Girar a imagem já consigo.
Porém podem perceber que no primeiro giro, a parte de cima da imagem corta.

Gostaria de uma forma que ao girar ela se adequasse e não cortasse nada.

Tentei com CSS porém sem sucesso, alguma sugestão ?

1
  • Não vai dar certo com transform. Pois o transform só muda a parte do composite, o que quero dizer é que não muda a renderização da página para rearranjar os elementos na tela alternando ajustando margens, positions etc. o que está acontecendo é que a imagem esta girando apenas visualmente no centro do próprio eixo. ele está se movendo apenas "virtualmente" na tela sem interferir nos elementos que estão ao lado ou no próprio espaço que o elemento ocupa originalmente.
    – hugocsl
    Commented 7/08/2019 às 12:57

1 Resposta 1

0

Achei duas respostas interessantes neste tópico:
https://stackoverflow.com/questions/18531698/css-rotate-image-and-align-top-left

function rotateImage(elm, deg) {
    $(elm).css('margin-left', 0).css('margin-top', 0);
    $(elm).css('transform', 'rotate(' + deg + 'deg)');
    // Get the container offset
    var offsetContLeft = $(elm).parent().offset().left;
    var offsetContTop = $(elm).parent().offset().top;
    // get the new rotated offset
    var offsetLeft = $(elm).offset().left;
    var offsetTop = $(elm).offset().top;
    // Subtract the two offsets.
    var newOffsetX = Math.floor(offsetContLeft - offsetLeft) + 1;
    var newOffsetY = Math.floor(offsetContTop - offsetTop) + 1;
    $("#a").text(newOffsetX + "-" + newOffsetY)
    // Apply the new offsets to the margin of the element.
      $(elm).css('margin-left', newOffsetX).css('margin-top', newOffsetY)
          .css('margin-right', newOffsetX).css('margin-bottom', newOffsetY);
}
var rot = 0;
$("#myrotate").click(function (e) { 
rot += 15;
      rotateImage('#myimage', rot);
});

Fiddle

E esta também:

div:hover #myimage {
    -webkit-transform: translateX(-100%) rotate(-90deg); /* Safari */
    -moz-transform: translateX(-100%) rotate(-90deg); /* Firefox 3.6 Firefox 4 */
    -ms-transform: translateX(-100%) rotate(-90deg); /* IE9 */
    -o-transform: translateX(-100%) rotate(-90deg); /* Opera */
    transform: translateX(-100%) rotate(-90deg); /* W3C */  
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    -o-transform-origin: top right;
    transform-origin: top right;
}
<div style="border: 1px solid red;">
  <img id="myimage" src="http://upload.wikimedia.org/wikipedia/mediawiki/a/a9/Example.jpg" style="border: 3px solid silver;" />
</div>

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 .