Je, unahusiana na kuhusiana na picha?

Je, unahusiana na kuhusiana na picha?

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

亲自试一试

Taradhisia:Mfano huu hauuchukuliwa kwa mifuriko ya kifungu na simu ya mkononi.

Maelezo:Tazama blogu wetu Mafunzo ya Gari ya 3D CSStaambia mafunzo zaidi kuhusu gari ya 3D.

Picha ya 3D ya na matukio

Mafunzo wa kuhusiana na tasnimi ya 3D ya picha na matukio:

Shenzhen

Mji mazingi sana

Kilichu kwanza - Ongeza 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>

第二步 - 添加 CSS：

/* 翻转盒容器 - 可设置宽度和高度为任意值。我们添加了边框属性来展示当鼠标悬停时翻转本身会超出盒子（如果不想要 3D 效果就移除透视效果）。 */
.flip-box {
  background-color: transparent;
  width: 300px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* 如果您不想要 3D 效果，请将此删除 */
}
/* 这个容器用于定位正面和背面 */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* 当您将鼠标移到翻转盒容器上时，进行水平翻转 */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}
/* 定位正面和背面 */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* 设置正面的样式（如果图像缺失则回退） */
.flip-box-front {
  background-color: #bbb;
  color: black;
}
/* 设计背面的样式 */
.flip-box-back {
  background-color: dodgerblue;
  color: white;
  transform: rotateY(180deg);
}

亲自试一试