跳到主要内容

如何使用CSS 3D创建动态按钮

去年我们开发了新产品Orangina网站ACHTUNG,旨在创造一种有机和有趣的东西。然而,一个简单的功能变得非常具有挑战性:按钮。

我们所追求的非正统形状使用CSS创建可能很乏味。通常最简单的选择是使用图像 - 然而,这并不总是理想的,因为它使一切都变得不那么灵活。

你可以使用CSS使用2D变换和CSS生成的内容创建很多形状,但这并没有为这个特定的形状削减它。解决方案:CSS 3D。

我们的按钮实际上是在3D空间中渲染的形状,但由于它只有一种颜色,因此“深度”变得难以察觉,从而产生倾斜边缘的错觉。这允许我们通过更改元素在3D空间中的位置来设置悬停按钮的形状。

什么是CSS 3D?

Leon explains how CSS 3D can transform buttons in 3D space

Leon解释了CSS 3D如何在3D空间中转换按钮

CSS 3D是在Safari的第一部iPhone(iOS 2)上引入的。新的CSS属性使用户能够在3D空间中定位页面上的元素。从那时起,这些属性已经标准化为W3C规范,到目前为止它们已被所有主流浏览器采用。

当我谈论CSS 3D时,我正在讨论透视属性和3D变换。 perspective属性用于定义3D环境并设置此环境的深度。

定义3D环境后,所有嵌套元素都将位于此3D空间中,其中可以使用变换来定位它们。所以,例如:

HTML

CSS

#stage {-webkit-perspective:300px;观点:300px; } .element {-webkit-transform:translateZ(-300px); transform:translateZ(-300px); }

如您所见,perspective属性以像素为单位定义。该值确定从绘图平面到观察者眼睛的假定位置的距离。

CSS 3D perspective property

CSS 3D可以使元素看起来更近或更远

设置透视后,可以在Z轴上移动嵌套元素,使它们显得更近或更远。

用于模拟该效果的缩放使用等式S = d /(dZ)计算,其中d是透视属性的值,Z是translateZ的值。

在前面的示例中,元素将缩放到原始大小的一半。此外,透视原点属性可用于确定消失点的位置。透视原点的默认值为“50%50%”,将消失点的位置放在中心。

当您组合不同的变换属性(例如缩放和旋转)时,您可以创建一些有趣的结果。

.element {-webkit-transform:translateZ(-300px)rotateY(20deg); transform:translateZ(-300px)rotateY(20deg); }

在此示例中,元素将由于其在Z轴上的位置而缩放,并且还将沿其Y轴旋转20度。

CSS 3D eye position

组合变换属性可创建有趣的动画效果

有关如何渲染3D元素的更详细说明,点击这里

请记住,转换的顺序很重要 - 它们从左到右应用。如果您在上面的示例中更改了顺序,首先放置旋转,则元素的位置将不同。

变换的顺序可以表示围绕元素原点旋转和围绕其父元素原点旋转之间的差异。

付诸实践

我们使用以下CSS作为按钮:

.button {-webkit-perspective:100px;观点:100px; } .button:在{-webkit-transform:rotateY(-6deg)rotateX(-5deg)translateX(-4%)之后; transform:rotateY(-6deg)rotateX(-5deg)translateX(-4%); }

结果

要查看完成的按钮,请访问Netm.ag/CSScode-266。通过使用:after伪元素作为按钮的背景,我们可以在按钮元素本身上设置透视图,并在:after元素上使用transform属性。这也允许我们将背景与文本分开转换。

CSS 3D code

Leon的CSS 3D按钮代码可以在网上找到

在:after元素上使用负Z-index将其放在文本后面。另外,使用:after伪类可以避免使用额外的HTML元素(使用包装器div可以实现相同的效果)。

通过向元素添加过渡,您可以创建一些整洁的动画效果 - 例如,当您将鼠标悬停在按钮上时。以下代码将使按钮的背景动画为镜像状态。

.button:在{-webkit-transition:-webkit-transform .3s easy-out之后;过渡:变换.3s缓和; } .button:hover:after {-webkit-transform:rotateY(6deg)rotateX(5deg)translateX(4%); transform:rotateY(6deg)rotateX(5deg)translateX(4%); }

要记住的事情

CSS 3D有一些事情要记住:

  • 某些浏览器不支持3D变换和透视,最明显的是IE9及更低版本。 IE10和IE11都不支持transform-style:preserve-3d属性,本文未对其进行介绍,但对于某些情况可能是一个有用的功能。对于完整的浏览器支持表,请查看caniuse。 COM /#技艺= transforms3d
  • 此时,Safari和大多数Android浏览器中的转换和透视属性仍然需要-webkit-前缀
  • 3D变换可能会导致Firefox中出现锯齿状边缘。我们在这里通过添加:outline:1px solid transparent;
  • 对元素进行3D变换将触发硬件加速。这有几个好处,例如更流畅的动画。需要注意的一个问题是,在WebKit浏览器中,启用硬件加速可能会导致模糊的图像和文本

使用CSS 3D非常酷,我希望本文能够为您提供有关如何在项目中使用它的一些灵感。

话: Leon De Wit

Leon De Wit是一名前端开发人员Egotribe,他的专业领域是HTML,CSS和JavaScript。本文最初发表于网络杂志问题266。

喜欢这个?阅读这些!



翻译字数超限