css3动画两张图片对折

CSS3动画可以让我们实现各种炫酷的效果，比如将图片对折。下面是一段代码示例：

 .wrapper {
   position: relative;
   perspective: 1000px;
 }
 .card {
   position: absolute;
   width: 50%;
   height: 100%;
   transform-style: preserve-3d;
   transition: transform 1s ease-in-out;
 }
 .card > img {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
 }
 .card.front {
   transform: rotateY(-180deg);
 }

代码中使用了 transform-style 属性设置为 preserve-3d，保留每个元素的 3D 位置。同时，使用 transition 属性实现翻转效果的动画。设置 backface-visibility 为 hidden 可以防止悬停时翻转出现问题。

接下来，我们来看一下上述代码实现的效果：

演示效果如上所示。当我们鼠标悬停在图片上时，图片会沿着 Y 轴翻转。这种炫酷的效果可以为我们的网站增加一些生动感。