CSS3动画让网页设计更加生动，其中卡片式动画也是一种常见的效果。下面我们通过代码实现一下吧。

/* 设置卡片容器的宽度、高度、背景颜色*/
.card-container {
width: 200px;
height: 250px;
background-color: lightblue;
overflow: hidden;
perspective: 1000px;
}
/* 设置卡片的宽度、高度、背景图片 */
.card {
width: 100%;
height: 100%;
background-image: url("card.png");
background-size: cover;
transform-style: preserve-3d;
transition: transform 1s ease-in-out;
}
/* 鼠标悬停在卡片容器上时，卡片翻转 */
.card-container:hover .card {
transform: rotateY(180deg);
}
/* 卡片正面样式 */
.card-front {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
/* 卡片背面样式 */
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform: rotateY(180deg);
background-color: lightgreen;
}

通过代码，我们可以看到，先设定一个卡片容器，设定其宽度、高度和背景颜色，并在其中设置一个卡片元素。卡片元素需要设置宽度、高度和背景图片，并设定其transform-style属性为preserve-3D，这样可让其内部元素继承3D属性。当鼠标悬停在卡片容器上时，卡片进行翻转，此时需要在:hover状态下，通过transform属性设置卡片的旋转角度，这里是180度。同时，卡片正反面需分别设定样式，其中卡片反面需要设定旋转角度、背景颜色并设置backface-visibility为hidden，这样可以避免出现卡片翻转时的闪烁问题。通过这些步骤，我们就实现了一个简单的CSS3卡片翻转动画效果。