CSS 中的 3D 转换函数

suchonaseo

在本文中，我将展示如何使用 CSS 中新的 3D 转换函数和属性向网页和应用程序添加另一个维度。我们将研究变换、平移、旋转、缩放、透视等，以及与 z-index 相关的问题、浏览器陷阱以及这些功能的最佳用例。 元素可以在三个维度上进行转换： 水平 x 轴 垂直 y 轴，以及 深度 z 轴 在二维屏幕上，将表面视为 z 坐标零是很有用的。正 z 值会将对象移向您（在屏幕前面），而负 z 值会将对象移开（在屏幕后面）。添加透视后，更远的 z 值可能会导致对象完全消失。 这里有一些事情需要注意： CSS只能在三维空间中变换二维HTML元素。元素本身保持平坦且深度为零。可以在 z 平面上缩放，但这不会将正方形挤压成立方体。您仍然可以创建立方体，但需要六个元素来制作每一面。


CSS 3D 转换非常适合页面效果 - 但不要指望您能够创建下一个《我的世界》或《使命召唤》。使用WebGL等技术可以更好地实现复杂模型。 Learn to Code with JavaScript 所有现代浏览器(IE10+)都很好地支持3D 转换，但是： Internet Explorer 不支持transform-style: preserve-3d，这使得 WhatsApp 号码数据 无法创建 3D 场景。 所有版本的 Safari 都必须使用供应商前缀-webkit-backface-visibility来隐藏背面。所有其他浏览器都支持backface-visibility. 以下部分描述 3D 变换属性和功能。演示页面说明了大多数的使用方式。 该transform物业 任何元素都可以应用单个transform属性。可以为它分配一个带有一个或多个参数的函数。例如如果需要两个或多个转换，可以定义任意数量的空格分隔函数 例如，要在水平面缩放并垂直变换最后，transform: none;删除所有现有的转换。




平移（移动）功能 您可能使用过translate函数沿 x 轴水平移动元素或沿 y 轴垂直移动元素 可以使用任何长度单位。百分比参考转换后元素的大小，因此translateY(80%)应用了 100 像素高的块会将其向下移动 80 像素。 进入三维，我们还可以使用 给定三个元素 、绝对定位在同一位置。结果相当平淡： 非旋转场景 然而，如果我们旋转整个外部#scene容器，z 轴变换就会变得更加明显 旋转场景 简写translate3d函数允许元素沿所有三个轴相应移动 财产 默认情况下（并且始终在 IE 中）设置为flat. 这表明元素的所有变换子元素都位于元素本身的平面内。换句话说，内部元素可以应用任何变换，但它们会被挤压到容器的平面中： 平面风格 在大多数情况下，transform-style: preserve-3d;必须用于指示子元素位于 3D 空间中，并且容器的任何变换都将相应地变换。