CSS3带来了很多新的特性，其中之一就是图片正反面翻转的效果。这个效果非常实用，在网页设计中经常会用到。

.flip-card {

background-color: transparent;

border: none;

perspective: 1000px;

}

.flip-card-inner {

position: relative;

width: 100%;

height: 100%;

text-align: center;

transition: transform 0.6s;

transform-style: preserve-3d;

}

.flip-card-front, .flip-card-back {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

}

.flip-card-front {

background-color: #bbb;

color: black;

}

.flip-card-back {

background-color: #2980b9;

color: white;

transform: rotateY(180deg);

如上代码所示，首先需要给外层元素添加perspective属性，来设置视角，使得翻转效果更加逼真。然后使用transform-style: preserve-3d来开启3D空间，使元素可以在3D空间中旋转。

内层元素使用绝对定位，占用父容器的全部空间。如上代码所示，内层元素分为正面和背面两部分，使用了绝对定位和backface-visibility: hidden，隐藏了背面，并且将面向用户的正面和面向用户的背面垂直旋转，达到翻转效果。

使用翻转效果可以让页面变得更加动态，增加用户的体验感。这个效果在展示产品或者图片时非常实用，也可以用来做一些有趣的动画效果。