效果图：
代码：
需要注意perspective属性/cssref/pr_perspective.asp
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>css动画旋转卡片效果</title></head><body><div class="re-box"><div class="re-item"><div class="re-item-front"><img src="/it/u=1887300482,1122059733&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="123" /><div class="text">正面</div></div><div class="re-item-back"><img src="/it/u=1274368820,2961871675&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=863" alt="456" /><div class="text">反面</div></div></div></div></body></html><style lang="scss" scoped>.text{margin: 5px;width: 40px;letter-spacing: 2px;}.re-box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}.re-item {/* perspective 属性定义 3D 元素距视图的距离，以像素计。 */perspective: 500;}.re-item img {width: 220px;height: 340px;}.re-item-front {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #fff;perspective: 1000;backface-visibility: hidden;transition: all 1.5s;box-shadow: rgba(50, 50, 50, 0.2) 0 0 15px;overflow: hidden;animation: mymove 6s linear infinite;}.re-item-back {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #fff;perspective: 1000;backface-visibility: hidden;/* 该属性定义当元素不面向屏幕时是否可见 */transition: all 1.5s;box-shadow: rgba(50, 50, 50, 0.2) 0 0 15px;overflow: hidden;animation: mymove1 6s linear infinite;}.re-item-back {position: relative;transform: rotateY(-180deg);}@keyframes mymove {from {transform: rotateY(0deg);}to {transform: rotateY(-360deg);}}@keyframes mymove1 {from {transform: rotateY(-180deg);}to {transform: rotateY(-540deg);}}</style>
