回到所有的课程
课程库

转换

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

本视频采用了旧的用户界面。更新版本即将到来!

使您的元素与转换效果的生活。移动、缩放、旋转和倾斜你的元素,使它们呈现3D外观。

在开始阅读本指南之前,请查看介绍三维

在这节课中:

  1. 理解转换
  2. 移动一个元素
  3. 规模的一个元素
  4. 旋转一个元素
  5. 倾斜元素的比例
  6. 编辑改变设置

转换的概述

有4种类型的转换:

  1. 移动
  2. 规模
  3. 旋转

中的元素可以添加一个或多个转换风格的面板>影响>2D和3D转换

移动一个元素

在这个例子中,让我们将变换添加到连接块.我们会在徘徊状态:

  1. 拖一个部分添加元素面板在你的页面
  2. 部分一个类(例如“Main section”)
  3. 拖一个连接块添加元素面板部分你只是说
  4. 连接块一个类(例如,“Link block”),并按你喜欢的样式设置它
  5. 复制/粘贴连接块总共创建3个
  6. 选择连接块
  7. 开放风格的面板>选择字段并选择徘徊从下拉

让我们添加一个移动变换的徘徊的状态连接块

  1. 开放风格的面板>影响>2D和3D转换
  2. 单击加号图标以添加新的变换

移动Transform是默认的选择,以及默认的单位移动值为像素(px)。您可以通过单击PX并从下拉菜单中选择您喜欢的单位来更改单位。

了解更多关于输入值和单位

移动transform,你可以沿着水平(X)轴左右调整元素的位置。您也可以沿着垂直(Y)轴上下调整位置。同时调整X轴和Y轴会使元素对角线移动。

沿着z轴移动元素会改变元素的感知深度。但除非你设置一个孩子的角度首先在父元素上。

在我们的例子中,the部分元素的父元素连接块.让我们调整孩子的角度

  1. 选择部分
  2. 开放风格的面板>影响>2D和3D转换
  3. 单击3个省略号以打开改变设置
  4. 改变孩子的角度>距离1000像素

现在孩子的角度的父元素连接块-我们来改变一下连接块的z轴的值:

  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值的链接。

悬停在链接块要看你的规模变换动作。

注意:你可以通过沿z轴缩放来创建一个非常强大的3D效果。这种效果适用于具有不同Z值的子元素的父元素。

了解更多关于三维视角

旋转一个元素

在添加一个旋转转换,让我们删除现有的移动而且规模转换:

  1. 选择您的连接块确保它在徘徊状态
  2. 开放风格的面板>影响>2D和3D转换
  3. 悬停在每个变换上,点击垃圾图标(移除)

现在添加旋转变换:

  1. 选择连接块
  2. 开放风格的面板>选择字段
  3. 单击下拉箭头并选择徘徊
  4. 滚动到影响>2D和3D转换然后单击加号图标以添加一个新的转换
  5. 单击旋转按钮并对X、Y和Z轴进行更改

要顺时针或逆时针旋转一个元素,你需要沿着z轴旋转。如果没有在父元素上设置3D透视图,则X轴和y轴旋转默认显示为扁平。

要使X轴和y轴旋转看起来像3D,请启用3D透视孩子的角度-在父元素上。在我们的例子中,您已经在连接块的父元素—部分

悬停在链接块要看你的旋转变换动作。

倾斜一个元素

在添加一个转换,让我们删除现有的旋转变换:

  1. 选择您的连接块确保它在徘徊状态
  2. 开放风格的面板>影响>2D和3D转换
  3. 将鼠标悬停在现有的转换上,然后单击trash图标(移除)

现在添加变换:

  1. 选择连接块
  2. 开放风格的面板>选择字段
  3. 单击下拉箭头并选择徘徊
  4. 滚动到影响>2D和3D转换然后单击加号图标以添加一个新的转换
  5. 单击按钮并对X轴和Y轴进行更改

您可以调整沿X轴或y轴的倾斜变换。在父元素上应用3D透视图对倾斜变换没有影响。

编辑改变设置

转换设置允许您控制影响应用到元素的所有转换的高级选项。其中包括转换起源沿墙可见性设置,自我的角度来看,而且孩子的角度

您可以通过访问转换设置风格的面板>影响>2D和3D转换.单击3个省略号以打开改变设置

起源

转换起源确定发生转换的原点或定位点。默认情况下,起源设置在中心,这意味着所有的变换都将从元素的中心发生。

让我们调整变换起源连接块

  1. 选择连接块
  2. 开放风格的面板>选择字段
  3. 单击下拉箭头并选择徘徊
  4. 滚动到影响>2D和3D转换然后单击3个椭圆以打开改变设置
  5. 调整点起源
  6. 将鼠标悬停在连接块

您可以设置起源控件中的一个点起源控制。您还可以通过输入水平位置(左)和垂直位置(上)的值来手动调整定位。您还可以更改px、%(默认)、vw和vh之间的值的单位。

如果你调整起源例如,在右下方,转换从该位置开始。这只适用于规模而且旋转

三维视角

当你还没有设置透视图时,所有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. 选择可见隐藏的沿墙

这在创建时很有用旋转卡在背面显示内容。

现在你知道了——让这些元素跳舞!

尝试Webflow——它是免费的
Baidu
map