html中图片翻转代码

HTML中的图片翻转是指将图片被旋转180度或水平翻转，以达到各种引人注目的视觉效果。实现图片翻转需要使用CSS3的Transform属性，同时也要设置过渡效果。

下面是一段简单的HTML代码和CSS代码，实现一个图片的翻转：

<div id="flip">
  <img src="image.jpg">
</div>

<style>
  #flip {
    perspective: 1000px; /*设置视距*/
  }

  #flip img {
    transition: transform 1s ease; /*过渡效果*/
    transform-style: preserve-3d; /*3D变换*/
  }

  #flip:hover img {
    transform: rotateY(180deg); /*在hover状态下水平翻转*/
  }
</style>

在上面的代码中，我们使用了一个div包裹住图片，并在CSS中设置了perspective属性，这是3D效果需要的一个重要前提。接着我们为img标签设置了transition和transform-style属性，分别表示过渡效果和3D变换；在hover状态下，使用transform: rotateY(180deg)设置图片的水平翻转。

此外，还可以通过transform: rotateX(180deg)实现图片的180度旋转，即上下翻转。同时也可以结合使用transform: rotateY(90deg)和transform: rotateX(90deg)实现各种角度的翻转效果。需要注意的是，3D变换效果只在支持CSS3的浏览器中才能正常显示。