使用2D和3D转换来操作元素的外观和位置,而不影响周围的元素。
使您的元素与转换效果的生活。移动、缩放、旋转和倾斜你的元素,使它们呈现3D外观。
在开始阅读本指南之前,请查看介绍三维.
在这节课中:
有4种类型的转换:
中的元素可以添加一个或多个转换风格的面板>影响>2D和3D转换.
在这个例子中,让我们将变换添加到连接块.我们会在徘徊状态:
让我们添加一个移动变换的徘徊的状态连接块:
的移动Transform是默认的选择,以及默认的单位移动值为像素(px)。您可以通过单击PX并从下拉菜单中选择您喜欢的单位来更改单位。
了解更多关于输入值和单位.
与移动transform,你可以沿着水平(X)轴左右调整元素的位置。您也可以沿着垂直(Y)轴上下调整位置。同时调整X轴和Y轴会使元素对角线移动。
沿着z轴移动元素会改变元素的感知深度。但除非你设置一个孩子的角度首先在父元素上。
在我们的例子中,the部分元素的父元素连接块.让我们调整孩子的角度:
现在孩子的角度的父元素连接块-我们来改变一下连接块的z轴的值:
悬停在链接块在我们的例子中,转换效果现在太突然了。
使平滑:使效果平滑:
如果你悬停在你的链接块现在,移动变换更流畅。
注意:一旦您指定了元素上转换的类型,您就可以为一个或多个轴设置值。但是,如果您在转换类型之间切换(例如,从移动来规模)在设置转换值时,您的第一个转换设置将丢失。
若要添加多种类型的转换而不丢失以前的任何设置,请使用加号图标添加额外的转换。
让我们单独添加一个规模改变我们的连接块:
规模如果值大于1,则转换使元素看起来更大,如果值在0到1之间,则元素看起来更小。默认情况下,X和Y值都是链接的,所以元素按比例缩放。要独立编辑每个值,可以通过单击锁图标来取消X和Y值的链接。
悬停在链接块要看你的规模变换动作。
注意:你可以通过沿z轴缩放来创建一个非常强大的3D效果。这种效果适用于具有不同Z值的子元素的父元素。
了解更多关于三维视角.
在添加一个旋转转换,让我们删除现有的移动而且规模转换:
现在添加旋转变换:
要顺时针或逆时针旋转一个元素,你需要沿着z轴旋转。如果没有在父元素上设置3D透视图,则X轴和y轴旋转默认显示为扁平。
要使X轴和y轴旋转看起来像3D,请启用3D透视孩子的角度-在父元素上。在我们的例子中,您已经在连接块的父元素—部分.
悬停在链接块要看你的旋转变换动作。
在添加一个斜转换,让我们删除现有的旋转变换:
现在添加斜变换:
您可以调整沿X轴或y轴的倾斜斜变换。在父元素上应用3D透视图对倾斜变换没有影响。
转换设置允许您控制影响应用到元素的所有转换的高级选项。其中包括转换起源,沿墙可见性设置,自我的角度来看,而且孩子的角度.
您可以通过访问转换设置风格的面板>影响>2D和3D转换.单击3个省略号以打开改变设置.
转换起源确定发生转换的原点或定位点。默认情况下,起源设置在中心,这意味着所有的变换都将从元素的中心发生。
让我们调整变换起源为连接块:
您可以设置起源控件中的一个点起源控制。您还可以通过输入水平位置(左)和垂直位置(上)的值来手动调整定位。您还可以更改px、%(默认)、vw和vh之间的值的单位。
如果你调整起源例如,在右下方,转换从该位置开始。这只适用于规模而且旋转.
当你还没有设置透视图时,所有3d兼容的转换(例如,旋转X,旋转Y,移动Z,缩放Z)要么是一个平面的,二维的外观,要么根本没有效果。启用3D透视图可以在3D空间中移动、旋转和缩放元素。
您可以在父元素上设置透视图并影响它的所有子元素,或者只对元素本身设置透视图。当你定义z轴和观察者之间的距离时,你也可以添加一个3D视角到你的元素中。
视角的距离值决定了3D效果的强度。为了更令人印象深刻的效果,设置一个小的值(小于1000px)。这使观众更接近z轴。设置更高的值使效果更微妙。
您可以设置自我的观点上一个元素如果你想要一个3D效果只应用到该元素及其子元素。然而,这种效果不像设置一个孩子的角度在父元素上。
设置一个自我的观点:
设置一个孩子的角度在父元素上创建一个逼真的3D效果的所有子元素。
设置一个孩子的角度在父元素上:
这些3D设置将应用于父元素子元素的属性转换。
沿墙允许您设置对象背面的可见性。
默认情况下,当你沿着X轴或y轴旋转一个元素180°时,它看起来是相反的,就像从后面看它。元素中的任何文本内容看起来都是相反的,就像你拿着它对着镜子一样。
你可以显示或隐藏沿墙元素转换设置中的元素的一部分:
这在创建时很有用旋转卡在背面显示内容。
现在你知道了——让这些元素跳舞!
提交表单时出错了。请联系support@www.raktarban.com