联系我们

你要买什么？

经过麦宜云
2024年4月14日

使用变换构造翻转卡片

使用 CSS 3D 变换创建一个简单的卡片翻转悬停动画。

在本教程中，您将掌握使用 CSS 3D 变换制作基本卡片翻转动画的技术 — 所有这些都无需手动编码。卡片旋转是一种通过揭示补充信息来引入视觉活力的有效方法。例如，实施卡片翻转动画可让您突出显示有关您正在营销的商品的更多细节。 

在本教程中:

  1. 建立一个部分和分区块来包含你的卡片图片组件
  2. 时尚卡正面和背面图片组件
  3. 在祖先元素上配置后代视角
  4. 指定卡片图片组件上的转换属性
  5. 动画卡片包装器在悬停时旋转 

建立一个段和分区块来容纳你的卡片图片组件

首先，附加一个 部分 在您的页面上： 

  1. 揭开 插入元素 位于左侧工具栏中的窗格
  2. 拖动 部分 到您的页面

位置一 分区块 在最近插入的段内：

  1. 提取一个 分区块 来自 插入元素控制板 并将其嵌入 部分 先前设立 
  2. 为 分区块 （例如，“卡片包装纸”） 

制作卡片正面和背面图片组件

插入并准备卡片图片组件： 

  1. 单独放下2 图片组件 来自 插入元素 窗格并将它们放置在卡片包装内 分区块 最近创建 
  2. 选择您的初始图片并为其指定卡片正面的类名。对后续图片重复此过程，但将其指定为卡片背面的类名。 

要将图像对齐： 

设计，将其配置为 显示：块. 确保对两张图片进行调整，使它们重叠。

分区块。 继续 间距 并调整每张图片的左右边距 汽车。如果您希望以更快的方式将图片居中，请点击 水平居中元素 用于自动设置边距的按钮。

“设计”窗格 > 位置，将每幅图像修改为 绝对 并指定 上 位置。 

将卡片图像完全定位后，将两张卡片堆叠在一起。卡片背面位于卡片正面后面。

  • 点击卡片正面图片
  • 导航 设计 
  • 暂时改变 展示 到 没有任何

    • 建立父元素的子代视角

    部分 之前是否已包含在您的页面中？由于它充当卡片包装器 Div 块的父组件，因此我们必须设置该部分的 后代视角启用此视角便于以 3D 形式显示我们的变换。 

    1. 选择 部分
    2. 访问 “设计”窗格 > 影响 > 2D 和 3D 转换
    3. 利用 3 个披露点来揭开 转型 配置
    4. 下面 后代视角，指定一个 距离 1234 像素（您可以随时对其进行微调，以匹配所需的 3D 卡翻转外观） 

    指定卡片图像组件上的转换属性

  • 在 “设计”窗格， 继续 影响 并附加 2D 和 3D 变换 通过补充图标 
  • 选择 旋转 并将图片组件沿 Y 轴旋转 180 度 
    1. 重访 影响 > 2D 和 3D 转换
    2. 点击 3 个披露点即可展示 转型 配置 
    3. 指定 背面 作为 隐
  • 选择卡片正面图片组件
  • 调整 展示 到 堵塞 
  • 单独列出卡片正面组件。
  • 前往 影响 > 2D 和 3D 转换 
  • 点击 3 个披露点即可解锁 转型 设置 
  • 决定 背面 作为 隐

    • 动画卡片包装器在悬停时旋转

    1. 访问 选择器 卡片包装字段 分区块 
    2. 选择 悬停效果 来自 选择 下拉列表
    1. 激活 悬停效果 并导航至 修改 > 2D 和 3D 转换 
    2. 点击 + 号并选择 旋转 选择 
    3. 调整卡片包装器在 Y 轴上旋转 180 度

    为了见证你创建的翻转动画，请恢复到卡片包装器的初始状态 分区块 通过选择 模式 作为 不活跃. 

    最后，融入向卡片包装器部门区块的过渡。 

    1. 访问 外观面板 > 修改 > 过渡 
    2. 使用附加按钮添加新过渡 
    3. 来自 种类 下拉列表，选择 修改
    4. 包含 1000 毫秒的持续时间 

    是时候庆祝了——您已经完成了任务！单击设计器中的预览按钮以检查卡片翻转动作。将鼠标悬停在卡片上并退出以见证卡片翻转过渡！令人振奋！  

    相关资源
    • 阅读有关 2D 和 3D 转换的更多信息
    • 了解有关 3D 透视的更多信息

    ‍

    麦宜云
    Ewan Mak 的最新帖子 (查看全部)

    相关文章

    经过麦宜云
    更新于