[分享]css3怎么实现让图片翻转

CSS3提供了非常多的动画效果，其中包括让图片翻转的效果。只需要通过一些简单的CSS代码就可以实现这个效果。下面将介绍如何用CSS3制作图片翻转的动画效果。 / CSS3代码开始 / .flipbox...

CSS3提供了非常多的动画效果，其中包括让图片翻转的效果。只需要通过一些简单的CSS代码就可以实现这个效果。下面将介绍如何用CSS3制作图片翻转的动画效果。

/* CSS3代码开始 */
.flip-box {
  background-color: transparent;
  perspective: 1000px;
}

.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;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: #555;
  color: white;
  transform: rotateY(180deg);
}
/* CSS3代码结束 */ 

以上代码中，我们使用了CSS3的transform属性来实现翻转效果。我们通过设置计算机屏幕的视角深度来创造3D效果，进而设置正反面的背景样式和位置。当鼠标放在图片上时，一段时间内的转换动画就会发生，用户可以看到图片的翻转效果了。