css3 div翻转180

CSS3是一种用于网页设计的样式语言，其中的动画效果为网页带来了更加生动的展示效果。其中，div翻转180效果可以让网页元素更具立体感。下面介绍如何用CSS3实现该效果。

<div class="Box">
  <div class="front">
    <p>前面的内容</p>
  </div>
  <div class="back">
    <p>背面的内容</p>
  </div>
</div>

以上是HTML代码，其中class名字为Box的div元素包含两个子元素，即前面的内容和背面的内容。下面是CSS代码：

.Box {
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
}
.front {
    position: absolute;
    width:100%;
    height:100%;
    backface-visibility:hidden;
}
.back {
    position: absolute;
    width:100%;
    height: 100%;
    backface-visibility:hidden;
    transform:rotateY(180deg);
}
.Box:hover {
    transform: rotateY(180deg);
}

以上代码实现的功能是，当鼠标移动到class名字为Box的div元素上时，该元素会实时翻转成背面，并显示背面内容。当鼠标移开后，该元素会实时翻转回来，显示前面的内容。如此就实现了div翻转180效果。