如何在Oracle APEX中使用CSS实现可绑定数据库内容的翻牌效果

完全可以通过纯CSS+APEX原生组件实现需求，不需要额外引入第三方插件，具体操作步骤如下： #

1. 准备数据源 #

先基于你的业务表创建报表查询，把需要的卡片字段查出来即可，SQL示例：

SELECT 
  card_id,
  card_title, -- 卡片标题
  card_desc, -- 卡片翻转后展示的描述
  card_img_url -- 卡片正面封面图存储字段
FROM your_card_table -- 替换为你的业务表名

你可以用经典报表、交互式报表或者自定义卡片区域承载该数据源。 #

2. 添加自定义CSS #

将下方CSS代码复制到当前页面的「内联CSS」配置项，或者应用级别的公共样式文件中：

/* 翻牌外层容器 */
.flip-card {
  background-color: transparent;
  width: 300px; /* 可根据需求调整卡片宽度 */
  height: 400px; /* 可根据需求调整卡片高度 */
  perspective: 1000px;
  margin: 16px;
  float: left;
}

/* 翻牌动效内层容器 */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

/* hover触发翻转，要点击触发可把:hover改为.active，配合动态动作切换类即可 */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* 正反卡片公共样式 */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* 正面卡片样式 */
.flip-card-front {
  background-color: #fff;
  color: #000;
}
.flip-card-front img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.flip-card-front .title {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 12px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 18px;
  box-sizing: border-box;
}

/* 背面卡片样式 */
.flip-card-back {
  background-color: #fff;
  color: #333;
  transform: rotateY(180deg);
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

3. 配置行输出模板 #

在你创建的报表的「HTML表达式」配置项中，把每行数据的输出结构改成翻牌结构即可，模板如下，替换为你自己的列名即可：

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="#CARD_IMG_URL#" alt="卡片封面">
      <div class="title">#CARD_TITLE#</div>
    </div>
    <div class="flip-card-back">
      <p>#CARD_DESC#</p>
    </div>
  </div>
</div>

如果需要点击才触发翻转，直接用APEX自带的动态动作给.flip-card绑定点击事件，切换active类即可。

内容的提问来源于stack exchange，提问作者Seko sonogo