翻转卡片

区块与子区块

翻转卡片由翻转卡片区块与翻转卡片-正面与翻转卡片背面两个子区块共同组成

• 翻转卡片区块
  • 翻转卡片-正面
  • 翻转卡片-背面

内容

分别对正面区块与背面区块进行设置，区块内可插入其他任何区块。

配置选项

翻转卡片

全局样式

Select 设置区块对应的全局样式。

Html标签

Select 区块根元素的 Html 标签类型。

交互设置

触发

Select 设置卡片翻转的触发事件。

旋转轴

Select 设置卡片翻转的轴方向。

反向

Boolean 将翻转的方向更改为默认方向的反方向。

自动回放

Number 设置自动回放的触发时间，0 ～ 100 之间的任意数值，整数或浮点数。0表示不启用自动回放。

持续时长

Boolean 设置翻转的动画持续时间。0 ～ 100 之间的任意数值，整数或浮点数。

延时

Boolean 设置翻转的动画延迟播放的时间。0 ～ 100 之间的任意数值，整数或浮点数。

动画曲线

Select 翻转动画的加速度曲线。

自定义曲线

String 自定义曲线函数，为 GSAP 动画曲线，设置方式可参考 GSAP Eases Docs。

设备

Select 选择启用的设备。

元素

<div class="mk-flip-card">
  <div class="el-front el-surface">...内部区块</div>
  <div class="el-back el-surface">...内部区块</div>
</div>

• 主容器 .mk-flip-card
• 正面 .el-front
• 背面 .el-back

其他

• 翻转卡片主区块内仅支持插入翻转卡片子区块（正面与背面两种区块），区块不可进行添加或删除；
• 可通过区块工具栏上方的翻转按钮切换正面与背面的显示，以分别对不同面的内容进行设置。