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

最新推荐文章于 2024-10-24 12:42:08 发布

原创

最新推荐文章于 2024-10-24 12:42:08 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #3d #css #前端 #html

本文介绍如何使用CSS3创建3D效果的银行卡片层叠展示，通过在父元素应用transform属性和perspective属性，结合transition实现平移变换效果。

使用纯css3绘制3D银行卡层叠展示特效

具体示例如下

<template>
   <div>
      <div class="tariffCards">
        <div class="economy">
            <img src="../images/css-article-imgs/example-css3D-card/tarcs.png" alt="中信银行" height="74">
            <h3>中信银行</h3>
            <span>zhongxin bank</span>
        </div>
        <div class="premiumeconomy">
            <img src="../images/css-article-imgs/example-css3D-card/tarcs.png" alt="中国银行" height="74">
            <h3>中国银行</h3>
            <span>chinease bank</span>
        </div>
        <div class="business">
            <img src="../images/css-article-imgs/example-css3D-card/tarcs.png" alt="交通银行" height="74">
 &