web-dev-qa-db-fra.com

faire pivoter l'image avec css

J'aimerais faire pivoter une image de 90 degrés avec CSS uniquement. Je peux faire la rotation, mais alors la position de l'image n'est pas ce qu'elle devrait être. Premièrement, il superposera d'autres éléments dans le même div, et deuxièmement, sa dimension verticale deviendra plus grande que le div qui le contient. Voici mon code

<article>
<section class="photo">
<div>Title</div>
<div class="imagetest">
<img src="DSC01688.JPG" width=100%/>
</div>
</section>
</article>

où les deux classes sont définies comme 

.imagetest img {
transform:          rotate(270deg);
-ms-transform:      rotate(270deg);
-moz-transform:     rotate(270deg);
-webkit-transform:  rotate(270deg);
-o-transform:       rotate(270deg);
}
.photo {
 width: 95%;
 padding: 0 15px;
 margin: 0 0 10px 0;
 float: left;
 background: #828DAD;
}

Existe-t-il un moyen de conserver l'image dans la section? Je peux traduire et redimensionner l'image afin qu'elle se trouve dans la section, mais cela ne fonctionne que si je connais la taille de l'image à l'avance. J'aimerais avoir une méthode fiable qui ne dépend pas de la taille.

cssimagerotationpositiontranslate-animation
12
v923z

Donnez au parent un style de overflow: hidden. S'il chevauche des éléments frères, vous devrez le placer à l'intérieur d'un conteneur de hauteur/largeur fixe et lui attribuer le style overflow: hidden.

9
DC_

Le problème semble être que l’image n’est pas carrée et que le navigateur s’ajuste de la sorte. Après la rotation, assurez-vous de conserver les dimensions en modifiant la marge de l’image.

.imagetest img {
  transform: rotate(270deg);
  ...
  margin: 10px 0px;
}

Le montant dépendra de la différence de hauteur x largeur de l'image . Vous devrez peut-être aussi ajouter display:inline-block; ou display:block pour que le paramètre de marge soit reconnu.

16
James Bone

Je sais que ce sujet est ancien, mais il n'y a pas de réponse correcte.

transformation de rotation fait pivoter l'élément à partir de son centre, ainsi, un élément plus large pivotera de la manière suivante:

 enter image description here

L'application de overflow: hidden masque la plus longue dimension, comme vous pouvez le voir ici:

 enter image description here 

img{
  border: 1px solid #000;
  transform:          rotate(270deg);
  -ms-transform:      rotate(270deg);
  -moz-transform:     rotate(270deg);
  -webkit-transform:  rotate(270deg);
  -o-transform:       rotate(270deg);
}
.imagetest{
  overflow: hidden
}
<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" width=100%/>
</div>
</section>
</article>

Donc, ce que je fais, ce sont des calculs. Dans mon exemple, l’image a une largeur de 455px et une hauteur de 111px et nous devons ajouter des marges basées sur ces dimensions:

  • marge gauche: (largeur - hauteur)/2
  • marge supérieure: (hauteur - largeur)/2

en CSS:

margin: calc((455px - 111px)/2) calc((111px - 455px)/2);

Résultat:

 enter image description here 

img{
  border: 1px solid #000;
  transform:          rotate(270deg);
  -ms-transform:      rotate(270deg);
  -moz-transform:     rotate(270deg);
  -webkit-transform:  rotate(270deg);
  -o-transform:       rotate(270deg);
  /* 455 * 111 */
  margin: calc((455px - 111px)/2) calc((111px - 455px)/2);
}
<article>
<section class="photo">
<div></div>
<div class="imagetest">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqVNRUwpfOwZ5n4kvVXea2VHd6QZGACVVaBOl5aJ2EGSG-WAIF" />
</div>
</section>
</article>

J'espère que ça aide quelqu'un!

0
stramin