透视

Avatar of Chris Coyier
Chris Coyier

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;

浏览器支持

IEEdgeFirefoxChromeSafariOpera
10所有10 112 24 215 2
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
所有所有3 23.2 262
来源:caniuse

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- 支持