Cara memutar gambar

Cara memutar gambar

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

Coba sendiri

Perhatian:Contoh ini tidak sesuai untuk tablet atau ponsel.

Petunjuk:Buka situs kami Tutorial Transformasi CSS 3D，untuk mendapatkan informasi lebih lanjut tentang transformasi 3D.

Gambar 3D flip dengan teks

Belajar bagaimana membuat animasi 3D flip gambar dengan teks:

Shenzhen

Sebuah kota yang sangat menakjubkan

Langkah pertama - Tambahkan HTML:

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front">
      <img src="img_paris.jpg" alt="Paris" style="lebar:300px;tinggi:200px">
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>Sebuah kota yang sangat menakjubkan</p>
    </div>
  </div>
</div>

Langkah kedua - Tambahkan CSS:

/* Kontainer kotak berbalikan - dapat diset ke lebar dan tinggi apapun. Kita menambahkan atribut border untuk menunjukkan bahwa saat mouse diarahkan ke kontainer kotak berbalikan, putar akan keluar dari kotak (jika ingin menghapus efek 3D, hapus efek perspektif). */
.flip-box {
  background-color: transparent;
  lebar: 300px;
  tinggi: 200px;
  border: 1px solid #f1f1f1;
  perspektif: 1000px; /* Jika Anda tidak ingin efek 3D, hapus perspektif ini */
}
/* Kontainer ini digunakan untuk menempatkan depan dan belakang */
.flip-box-inner {
  position: relative;
  lebar: 100%;
  tinggi: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Saat Anda memindahkan mouse ke dalam kontainer kotak berbalikan, lakukan putar horisontal */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180derajat);
}
/* Lokasi depan dan belakang */
.flip-box-front, .flip-box-back {
  position: absolute;
  lebar: 100%;
  tinggi: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Atur gaya depan (jika gambar hilang, lakukan fallback) */
.flip-box-front {
  background-color: #bbb;
  warna: hitam;
}
/* Desain gaya belakang */
.flip-box-back {
  background-color: dodgerblue;
  warna: putih;
  transform: rotateY(180derajat);
}

Coba sendiri