CSS3绘制3D银行卡片层叠展示特效

/* 设置父容器样式 */
.parent-container {
    perspective: 1000px; /* 设置透视距离，增加3D效果 */
}
 
/* 设置银行卡的共有样式 */
.card {
    width: 100px;
    height: 150px;
    background-color: #FFF;
    border: 1px solid #000;
    margin: 10px;
    /* 其他样式略 */
}
 
/* 设置银行卡的3D旋转动画 */
@keyframes rotate3D {
    from {
        transform: rotateX(0deg) rotateY(0deg);
    }
    to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
 
/* 设置第一张银行卡的样式 */
.card-1 {
    transform: translateZ(50px); /* 将卡片移到屏幕前方 */
    animation: rotate3D 5s infinite linear; /* 应用3D旋转动画 */
}
 
/* 设置第二张银行卡的样式 */
.card-2 {
    transform: rotateX(90deg) translateZ(50px); /* 将卡片旋转90度并移到屏幕前方 */
    animation: rotate3D 10s infinite linear; /* 应用3D旋转动画，动画时间不同 */
}
 
/* 设置第三张银行卡的样式 */
.card-3 {
    transform: rotateX(180deg) translateZ(50px); /* 将卡片旋转180度并移到屏幕前方 */
    animation: rotate3D 15s infinite linear; /* 应用3D旋转动画，动画时间稍短 */
}
 
/* 设置第四张银行卡的样式 */
.card-4 {
    transform: rotateX(270deg) translateZ(50px); /* 将卡片旋转270度并移到屏幕前方 */
    animation: rotate3D 20s infinite linear; /* 应用3D旋转动画，动画时间稍长 */
}
 
/* 设置第五张银行卡的样式 */
.card-5 {
    transform: rotateX(360deg) translateZ(50px); /* 将卡片旋转360度并移到屏幕前方 */
    animation: rotate3D 25s infinite linear; /* 应用3D旋转动画，动画时间稍短 */
}

这个代码实例展示了如何使用CSS3的@keyframes和transform属性来创建一个3D银行卡层叠展示的动画效果。每张银行卡都被分配了一个从0度到360度的旋转动画，并且每张卡的旋转速度和动画时间都有所不同，从而创建出一种层叠和动感十足的视觉效果。