改变

使用 2D 和 3D 变换来操纵元素的外观和位置,而不影响周围的元素。

使用改变效果为您的元素增添新鲜感。移动、放大、旋转和倾斜您的元素,使其呈现 3D 外观。

在开始阅读本手册之前,请先阅读一下 3D 入门指南。

本教程包含以下内容:

  1. 理解改变
  2. 移动元素
  3. 放大元素
  4. 旋转元素
  5. 倾斜元素的比例
  6. 修改更改配置

Alters 概述

有 4 种类型的 alter:

  1. 转移
  2. 放大
  3. 围绕
  4. 倾斜

您可以将一个或多个更改合并到元素中 造型部分 > 影响 > 2D 和 3D 修改.

移动元素

在这个例子中,让我们将修改内容添加到 连接块。这将在 徘徊 地位:

  1. 移动 部分 来自 包含元素面板 到您的网站
  2. 部分 (例如,“关键部分”)
  3. 拖动 连接块 来自 包含元素面板 进入 部分 你刚刚插入
  4. 连接块 (例如,“连接块”)并根据您的喜好进行自定义
  5. 复制 连接块 总计 3
  6. 选择 连接块
  7. 展开 造型部分 > 选择器区域 并选择 徘徊 从下拉菜单中

让我们应用一个 转移 改变为 徘徊 地位 连接块:

  1. 展开 造型部分 > 影响 > 2D 和 3D 变换
  2. 选择加号以添加新的 改造

转移 alter 是标准选择,默认单位为 转移 值是像素 (px)。您可以通过单击 PX 并从下拉列表中选择您喜欢的单位来更改单位。

进一步了解 输入值和单位.

通过 转移 改变时,您可以沿水平 (X) 轴左右调整元素的位置。您还可以沿垂直 (Y) 轴上下调整位置。同时调整 X 轴和 Y 轴会将元素沿对角线移动。

沿 Z 轴移动元素会改变元素的感知深度。但是,除非您建立 后代观点 最初是在前体元素上。

在我们的插图中, 部分 你插入的是 连接块. 让我们调整一下 后代观点:

  1. 选择 部分
  2. 打开 造型部分 > 影响 > 2D 和 3D 修改
  3. 点击 3 个点即可揭开 改造配置
  4. 修订 后代观点 > 距离 至 1000 像素

现在 后代视角 已在 Key 段上配置 — 连接块 — 让我们更新 连接块:

  1. 选择 连接块
  2. 展开 造型部分 > 选择器区域
  3. 点击下拉箭头并选择 徘徊
  4. 滚动到 影响 > 2D 和 3D 修改 并点击 转移 你之前制作的改变
  5. 调整 Z 值以增强深度透视

将鼠标悬停在任意 连接块 观察运动中改变的效果——在我们的情形下,效果目前太突然了。

为了平滑效果:

  1. 选择您的 连接块 并确保它在 没有任何 地位
  2. 展开 造型部分 > 影响 > 班次
  3. 点击加号以添加班次
  4. 从下拉列表中选择 改造
  5. 设置 期间 至 500 毫秒

你的转变 链接块 悬停时显得更加流畅。

重要的: 在元素上定义变换类型时,可以设置其一个或多个轴的值。但是,在变换类型之间切换(例如,从 移动规模) 配置变换值将导致初始设置丢失。

要合并多种转换类型而不丢失任何以前的配置,只需使用加法图标添加另一个转换。

修改元素的大小

让我们介绍一个单独的 规模 转变为我们的 链接块: 

  1. 选择 链接块
  2. 使用权 样式面板 > 选择器字段
  3. 展开下拉菜单并选择 徘徊
  4. 导航 效果 > 2D 和 3D 变换 并单击添加图标以包含新的转换
  5. 点击 规模 按钮并调整 X 和 Y 轴的值

规模 如果值超过 1,变换会导致元素在视觉上扩大;如果值介于 0 和 1 之间,变换会导致元素收缩。默认情况下,X 和 Y 值相互关联,以进行比例缩放。要调整单个值,可以通过取消选择锁定图标来取消 X 和 Y 配置的关联。

观察 规模 通过将鼠标悬停在 链接块.

重要的: 为了获得引人注目的 3D 效果,请考虑沿 Z 轴缩放。此技术尤其能增强具有展示不同 Z 值的子元素的效果。

探索更多 3D 透视.

旋转元素

在申请之前 旋转 转型,让我们消除现有的 移动规模 转换:

  1. 选择你的 链接块 并确保它在 徘徊 状态
  2. 使用权 样式面板 > 效果 > 2D 和 3D 变换
  3. 将鼠标悬停在每个转换上并选择 bin 图标(删除)

添加 旋转 现在转型:

  1. 选择 链接块
  2. 使用权 样式面板 > 选择器字段
  3. 展开下拉菜单并选择 徘徊
  4. 导航 效果 > 2D 和 3D 变换 并单击添加图标以添加新的转换
  5. 点击 旋转 按钮并调整 X、Y 和 Z 轴

要顺时针或逆时针旋转元素,您必须沿 Z 轴旋转。如果父元素未设置 3D 透视,则 X 轴和 Y 轴旋转默认会呈扁平状。

要使 X 和 Y 轴旋转具有更立体的外观,请激活 3D 透视图 — 特别是 儿童视角 — 在父元素上。在您的场景中,您已经在 链接块 父元素, 部分.

见证 旋转 通过将鼠标悬停在 链接块.

倾斜元素

在实施之前 倾斜 转型,让我们删除现有的 旋转 转型:

  1. 选择您的 链接块 并确保它在 徘徊 状态
  2. 使用权 样式面板 > 效果 > 2D 和 3D 变换
  3. 将鼠标悬停在现有转换上并选择 bin 图标(删除)

添加 倾斜 现在转型:

  1. 选择 链接块
  2. 使用权 样式面板 > 选择器字段
  3. 展开下拉菜单并选择 徘徊
  4. 滚动到 效果 > 2D 和 3D 变换 并单击添加图标以包含新的转换
  5. 点击 倾斜 按钮并调整 X 和 Y 轴的值

您可以使用 倾斜 变换。在父元素上启用 3D 透视不会影响倾斜变换。

修改转换配置

变换配置可控制影响应用于元素的所有变换的基本选项。这些包括变换 起源,可见性设置为 背面, 自我视角,儿童视角.

您可以通过以下方式访问调整配置 外观面板 > 影响 > 2D 和 3D 过渡 是可能的。您只需点击 3 个点即可揭开 修改配置

起点

根据 修改的起点或轴,即发生改变的地方。最初, 降低 位于中点,表示所有调整都将从物体的中心部分进行。

让我们微调变换 中点 为了 超链接框

  1. 选择 超链接框
  2. 揭晓 外观面板 > 标识符部分
  3. 选择下拉箭头并选择 徘徊
  4. 向下滚动至 影响 > 2D 和 3D 过渡 并点击 3 个点来访问 修改配置
  5. 修改 根据 观点 
  6. 将鼠标悬停在 超链接框

您可以定义 根据 选择 根据 命令。还可以通过输入水平位置(左)和垂直位置(上)的值来手动调整位置。此外,您还可以在 px、%(默认)、vw 和 vh 之间切换测量单位。

如果你转移 根据 例如,右下角的调整将从该位置开始。这仅影响 调整大小 旋转

3D 视角

如果您未指定透视图,则所有兼容 3D 的更改(例如,旋转 X、旋转 Y、移动 Z 和调整 Z 大小)都将呈现水平、二维外观或完全没有影响。激活 3D 透视图可让您在 3D 区域中重新定位、旋转和调整对象的大小。

您可以对上级元素建立透视图并影响其所有子元素,或仅影响对象本身。此外,您可以通过定义 Z 轴和查看器之间的间隙为对象引入 3D 透视图。

透视间隙测量决定了 3D 效果的强度。若要获得更显著的效果,请指定较小的数值(小于 1000px)。此方法可使观看者更接近 Z 轴。选择增加数值可减弱效果。

个性化视角

您可以指定 个性化视角 如果您希望仅对该元素及其后代实现 3D 效果,则可以使用此方法。但是,它不如分配 在主要物体上。 

介绍 个性化视角:

  1. 选择您想要影响的对象
  2. 打开 外观面板 > 影响 > 2D 和 3D 过渡 并点击 3 个点以显示 修改配置
  3. 设置距离值 个性化视角

后代视角

建立 后代视角 上部元素上的所有依赖组件均会呈现逼真的 3D 外观。

要设置 后代视角 在一个上部元素上:

  1. 选择主要元素 后代视角 你想调整
  2. 揭晓 外观面板 > 影响 > 2D 和 3D 过渡 并点击 3 个点来访问 修改配置
  3. 改造 差距 根据 供您修改

这些 3D 排列将应用于转换上级元素的后代上配置的属性。

对面

后部 让您可以选择决定对象背面的可见性。

默认情况下,当沿 X 轴或 Y 轴旋转元素 180° 时,它会反转,就像从后面看一样。元素内的任何文本内容都会反转,就像通过镜子查看一样。 

您可以展示或隐藏 后部 元素变换配置中元素的一部分:

  1. 选择您要调整的元素
  2. 揭晓 外观面板 > 影响 > 2D 和 3D 过渡 并点击 3 个点来访问 修改配置
  3. 选择 可见的 或者 为了 后部

此功能在设计时很有用 旋转卡片 披露对方的内容。

现在您已准备好将这些物品付诸行动了!

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