DigitalOcean 为您的旅程各个阶段提供云产品。立即开始使用 $200 免费额度!
perspective
CSS 属性通过影响 Z 平面和用户之间的距离,为元素提供 3D 空间。
效果强度由值决定。值越小,您越靠近 Z 平面,视觉效果越震撼。值越大,效果越微妙。
重要: 请注意,透视属性不会影响元素的呈现方式;它只是为子元素启用 3D 空间。这是 transform: perspective()
函数和 perspective
属性之间的主要区别。前者为元素提供深度,而后者创建由所有变换的子元素共享的 3D 空间。
.parent {
perspective: 1000px;
}
.child {
transform: rotateY(50deg);
}
上面的演示旨在展示函数和属性之间的区别。
- 在左侧,您可以看到属性应用于变换元素 (
transform: rotateY(50deg)
) 的父元素 (perspective: 50em
)。 - 在右侧,透视直接从变换应用于子元素 (
transform: perspective(50em) rotateY(50deg)
)。
这表明如何在父元素上设置透视使所有子元素共享同一个 3D 空间,从而共享同一个消失点。
让我们尝试更酷的东西:一个具有 3D 变换和透视的立方体。
立方体的制作方法如下:它依赖于两个嵌套的包装器(一个为立方体提供透视,另一个包装所有侧面)和 6 个元素来制作侧面。每个元素都拥有自己的变换,在 3D 空间中混合平移和旋转(例如,transform: rotateX(90deg) translateZ(1em)
)。
让我们以一个演示结尾,展示可能成为真实世界设计基础的东西:使用透视和变换的照片墙 + 说明。
当悬停在墙上时,子元素会旋转回其正常位置,取消效果。
重要! 使用 perspective
(值不同于 0 或 none)会创建一个新的堆叠上下文。
语法
perspective: none | <length>;
- 初始值:
none
- 应用于: 可变换元素
- 继承: 否
- 百分比: 不适用
- 计算值: 关键字
none
或绝对长度 - 动画类型: 按计算值
值
/* Keyword value */
perspective: none;
/* Length values */
perspective: 10px;
perspective: 2rem;
/* Global values */
perspective: inherit;
perspective: initial;
perspecive: revert;
perspective: unset;
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
10 | 所有 | 10 1 | 12 2 | 4 2 | 15 2 |
Android Chrome | Android Firefox | Android 浏览器 | iOS Safari | Opera Mobile |
---|---|---|---|---|
所有 | 所有 | 3 2 | 3.2 2 | 62 |
1 Firefox 10-15 使用前缀
-moz-
支持2 Chrome 12-35、Safari 4-8、Safari iOS 3.2-8.4、Opera 3.2 和 Android 浏览器 3-4.4.4 使用前缀
-webkit-
支持
简单但非常有效!
我认为这将在未来的3D设计世界中出现。:)
我知道我迟到了,但我只是想补充一点。
如果你使用的是Compass和Sass,并且想使用透视mixin,他们会告诉你这样做:
@include perspective( perspective );
。现在,根据 Compass 文档:“…'perspective' 是一个无单位的数字…”。
因此你会做类似这样的事情:
@include perspective( 1000 );
问题是这是错误的。为了使透视工作,你必须指定一个单位(px、%、em或rem)。
像这样:
@include perspective( 1000px );
输出将是
—
我决定四处看看其他信誉良好的网站是如何描述
perspective
属性的,发现了一些事情。24Ways.org 的这篇文章是错误的。注意:这篇文章是 2010 年 12 月的,所以我不知道规范是否从那时起就改变了,现在是否需要一个单位。
W3Schools.com当然也是错的! 不仅因为它没有在示例中使用单位,而且它还错误地将 Firefox 划掉了,而我们知道它在 Firefox 中可以正常工作(即使没有供应商前缀)。注意:“信誉良好”这个词显然不适用于 W3Schools.com,我们现在都知道了 :)。
正如我在上面所说,Compass 文档也是错误的。
MDM(Mozilla 开发者网络)是正确的。
Safari 开发者库是正确的。
我会在 Twitter 上用不到 140 个字符发布同样的信息:) - lol
好的,发布到 Twitter。
用完所有 140 个字符,lol。
我一直使用这个网站作为我所有 CSS3 开发的参考。
只是想分享我的作品,虽然很基础,但我试图在其中加入创造性。
http://cybernext.in/Services
这里,我两次使用了Perspective,一次在另一个内部,以获得更好的 3D 效果,我不得不使用双背景。
.signboard //background
{
transform: perspective(1000px);
transform-style: preserve-3d;
}
然后我使用Transform和Transition在悬停时移动广告牌。
很酷的作品,伙计!
对不起,在我弄清楚你在这句话中究竟是什么意思之前,我无法继续阅读这篇文章。
你的意思是“你离 Z 平面越近”还是“你离 Z 平面越远”? 你写的是错误的。
这里隐含的意思是“你离 Z 平面越近”。 可能是打错了字。
如果你设置一个较小的值,比如 200,则元素/3D 对象看起来很近,效果看起来更“突出”。
而如果你设置一个更大的值,比如 1000,则我们的视角看起来离对象更远,我们可以看到“更广阔的画面”。 结果,效果看起来就不那么突出了。
想象一下,将一个立方体放在你脸上2 厘米的地方,然后把它放在50 厘米的地方。 这个距离就是透视值所代表的距离。
@Vin 谢谢你的清晰解释!
实际上,透视会影响 webkit 引擎的渲染,在桌面环境中通常看不到它,但在 iPhone 或其他具有视网膜显示屏的智能手机上,你经常会发现子元素的渲染变得模糊,举个简单的例子...
下面的图片显示了一个表格,其中一个父元素(在本例中是 .row)的透视设置为“none”,你可以看到图片清晰漂亮。
下一张图片显示了完全相同的表格,但父元素(.row)的透视设置为 4000,在视网膜显示屏上呈现的结果完全不同。
因此,透视肯定影响着渲染!
似乎图片被剥离了:)
好的图形:http://snaps.lucasrolff.com/znk8ypb3hfgdwcs.png
糟糕的图形:http://snaps.lucasrolff.com/oocvxlvk2eooar2.png
很容易理解!
有没有关于 IE9 回退的建议?
IE9 已经过时了。 不要再浪费时间在 IE9 上了。 告诉你的客户升级他们的浏览器。
Paul,非常感谢。
谈谈 HTML 的透视?
关于“透视”的解释很好,它不影响元素的渲染方式;它只是为子元素启用了 3D 空间。
谢谢!
那么
perspective()
函数呢? 有人知道哪些浏览器支持这个函数吗? 我四处查找了一些资料,但没有找到任何信息。快速测试表明,
perspective()
在 Safari 11、Firefox 58、Chrome 65 和 IE11 中有效。 虽然 IE11 不支持 MDN 演示 中使用的多个转换。现在是 2020 年了,这让我头疼。 谢谢你的解释!