Como girar imagens

Como girar imagens

<style>
img:hover {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
</style>
<img src="paris.jpg" alt="Paris">

Experimente você mesmo

Atenção:Este exemplo não se aplica a tablets ou smartphones.

Dica:Acesse nosso Tutorial de transformação 3D CSS，para obter mais informações sobre transformações 3D.

Imagens de rotação 3D com texto

Aprenda como animar a rotação 3D de imagens com texto:

Shenzhen

Que cidade impressionante

Primeiro passo - Adicionar HTML:

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="img_paris.jpg" alt="Paris" style="width:300px;height:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

Second step - Add CSS:

/* Flip box container - can set width and height to any value. We added the border attribute to show that when the mouse hovers over it, the flip itself will exceed the box (if you do not want 3D effects, remove the perspective effect). */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* If you do not want 3D effects, please remove this */
}
/* This container is used to position the front and back */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* When the mouse is moved over the flip box container, perform a horizontal flip */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* Position the front and back */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Set the style for the front (fallback if the image is missing) */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* Design the style of the back side */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

Experimente você mesmo