CSS中的3D变换功能-css教程-PHP中文网

首页

web前端

css教程

CSS中的3D变换功能

William Shakespeare

Feb 15, 2025 am 10:15 AM

CSS中的3D变换功能

钥匙要点

CSS 3D变换函数允许在三个维度上操纵HTML元素：水平X轴，垂直Y轴和深度z轴。这包括rotatex（），rotatey（），rotatez（），translate3d（），translatez（），scale3d（）和perspective（）。
CSS 3D变换，但是有一些例外。例如，Internet Explorer不支持Transform-fansfors：Preserve-3D，因此无法创建3D场景。野生动物园需要使用供应商预装-webkit-backface-visibility隐藏后面。 CSS 3D转换中的透视属性定义了对象远离观看者的距离，从而产生了深度的幻觉。透视长度越小，消失点越近，3D效果越明显。
在本文中，我将展示如何在CSS中使用新的3D转换功能和属性为您的网页和应用程序添加另一个维度。我们将研究转换，翻译，旋转，缩放，透视图等，以及与Z Index，浏览器Gotchas和这些功能最佳用例有关的问题。
html元素可以在三个维度上转换：

水平X轴

深度z轴

在这里有一些要注意的事情：

将正方形挤入立方体。您仍然可以创建一个立方体，但需要六个元素才能使每一侧面。

> CSS 3D转换非常适合页面效果 - 但不要指望您能够创建下一个Minecraft或“使命召唤”。使用WebGL等技术更好地实施了复杂模型。

在所有现代浏览器（IE10）中，3D变换均得到很好的支持，但是：

> Internet Explorer不支持转换风格：Preserve-3D，这使得无法创建3D场景。

>以下各节描述了3D变换属性和功能。演示页面说明了大多数使用的方式。

变换属性

任何元素都可以应用单个变换属性。可以为其分配一个或多个参数的函数。例如：

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

如果需要两个或多个转换，则可以定义任何数量的空间分隔函数：>

例如，在水平平面上缩放并垂直转换：

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

>最后，变换：无；删除所有现有的变换。

translation（移动）函数

<span><span>.element</span> {
</span>  <span>transform: scaleX(2) translateY(50px);
</span><span>}
</span>

>您可能使用翻译函数将元素水平移动沿x轴或垂直沿y轴移动：

可以使用任何长度单元。百分比参考转换元件的大小，因此施加了翻译（80％）的100px高块将其降低80像素。

进入第三维，我们也可以使用Translatez：

<span>transform: translateX(50px);        /* 50px to right */
</span><span>transform: translateY(-100%);       /* 100% up */
</span><span>transform: translate(50px, -100%);  /* both together */
</span>

给定三个元素，＃box1，＃box2和＃box3，绝对位于同一位置，translatez（-200px）应用于＃box2和translatez（-400px）应用于＃box3。结果是相当令人鼓舞的：

<span>transform: translateZ(-200px);      /* 200px 'into' the screen */
</span>

但是，如果我们旋转整个外部#Scene容器，则Z轴变换变得更加明显：>

CSS中的3D变换功能

速记translate3d函数允许相应地沿所有三个轴移动一个元素：

<span><span>#scene</span> {
</span>  <span>transform-style: preserve-3d;
</span>  <span>transform: rotateX(-10deg) rotateY(-10deg);
</span><span>}
</span>

>变换风格的属性

默认情况下（始终在IE）中，变换风格设置为平坦。这表明元素的所有转化子女都位于元素本身的平面上。换句话说，内部元素可能会应用任何变换，但它们会被压壁到容器的平面中： CSS中的3D变换功能

在大多数情况下，变换风格：preserve-3d;必须用于指示子元素位于3D空间中，并且容器的任何转换都会相应地转换。

<span>transform: translate3d(50px, 100%, 7em); /* x, y, z axis */
</span>

旋转功能

2D旋转（）函数实际上将元素围绕z轴旋转，并且与rotatez（）相同。例如：

CSS中的3D变换功能

rotatex（）绕水平轴旋转，旋转（）绕垂直旋转。

> 可以在：

>中定义角度

转 - 例如0.5转弯是顺时针方向的一半转弯
deg - 度，例如90DEG是顺时针
rad-弧度，例如-3.1416RAD是逆时针
毕业 - Gradians。一个完整的转弯为400grad，因此-200Grad是逆时针的一半。

可以使用旋转3D（）函数设置三个旋转轴。有些令人困惑，它接受四个值，它们描述了一个向量：>

x - 表示旋转轴的向量的x坐标（0至1）。

y - 表示旋转轴的向量的y坐标（0至1）。

a - 旋转角度。正角表示顺时针旋转和负逆时针。

>数学受虐狂可以阅读MDN的rotate3d（）的完整详细信息。

缩放（size）函数

函数scalex（）和scaley（）伸展或缩小水平和垂直平面中的元素：

scalez（）对深度平面的作用相同。在上面的示例中，变换：scalez（0.5）;因此，将每个元素之间的间距降低一半。

>

scale3d（x，y，z）函数可以在一个命令中的所有平面中应用比例。例如：

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

变换原点

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

默认情况下，将元素旋转并围绕其中心点缩放。可以通过设置最多三个空格分隔值的转换原始物质来修改这一点：>

CSS中的3D变换功能 >单值语法：x原点的长度或百分比。也可以使用一个左，中心，右上，顶部或底部关键字，而在顶部和底部设置Y来源的中心x origent。

两值语法：x和y起源。可以使用长度，百分比或关键字。

>三值语法：x，y和z起源。 z值只能是一个长度单元，例如PX或EM。

移动一个来源会影响其他来源的旋转平面。例如，变换原始：左中心0；将原点移至左侧边缘的中心。这将影响rotatey（）和rotatez（）函数。
后面可见性
>

backface-visibily：hidden;通常用于剪卡动画，其中两个元素显示卡的正面和背面，但一次只能看到一个。

透视

上面显示的示例不应用观点。无论距观众有多远，一个元素都会更深地移入Z平面。透视属性默认为没有，但可以将其设置为任何正长度。例如：

<span><span>.element</span> {
</span>  <span>transform: function1(parameter1, [...parameterN]);
</span><span>}
</span>

CSS中的3D变换功能

越小的视角长度，消失点越近，越明显的3D效果：

<span><span>.element</span> {
</span>  <span>transform: function1(p1, [...pN]) function2(p1, [...pN]);
</span><span>}
</span>

CSS中的3D变换功能

透视化点

默认情况下，视角消失点是要转换的元素的中心。可以通过设置透视原蛋白：x y;，where：来修改它。

> 相对于元素高度（0％，50％和100％等于关键字），

<span><span>.element</span> {
</span>  <span>transform: scaleX(2) translateY(50px);
</span><span>}
</span>

CSS中的3D变换功能右下角消失点：

<span>transform: translateX(50px);        /* 50px to right */
</span><span>transform: translateY(-100%);       /* 100% up */
</span><span>transform: translate(50px, -100%);  /* both together */
</span>

CSS中的3D变换功能 >还有一个perspective（）函数 - 用于审查，转换：透视（200px）。但是，它似乎并不尊重任何观点。

>现在一起

最后，可以在单个Matrix3d（）函数中定义缩放，旋转和翻译，该函数需要三维仿射转换的值不少于16个值。>

>这可能是在JavaScript中使用的，并由具有几何学学位的人尝试！对于CSS，转换功能的列表可能更可读和可维护。

进一步阅读

在概念上，在三个维度上工作可能很困难，但是CSS转换是对象操作的更容易的途径。演示页面提供了一个交互式工具，该工具将帮助您了解属性和功能如何一起工作。

>您可以找到CSS 3D转换的惊人示例，包括虚拟现实观众，第一人称射击游戏，图像画廊和星球大战滚动文字。许多是概念验证示范，不太可能在典型的项目中使用。但是，一些微妙的，逐渐增强的3D效果可以为您的网页和应用程序添加另一个维度。

MDN
> CSS转换模块
> CSS 3D介绍

>有关CSS 3D变换功能的常见问题

> CSS中的基本3D转换功能是什么？基本功能包括rotatex（），rotatey（），rotatez（），translate3d（），translatez（），scale3d（）和perspective（）。每个功能对元素都有独特的影响。例如，rotatex（）将元素围绕x轴旋转，而translatez（）沿z轴移动元素。这些函数可以组合起来创建复杂的3D变换。

> perspective（）函数如何在CSS 3D变换中起作用？

perspective（）在CSS 3D变换中函数定义对象的距离。远离用户。它在3D转化的元素中产生了深度和观点的幻想。该函数采用一个参数，这是像素中的透视值。较低的值比更高的值创造了更明显的透视效果。

我可以在CSS中结合多个3D转换函数吗？这是通过在变换属性中列出每个函数（由空间隔开）来完成的。这些功能以列出的顺序应用。这使您可以通过结合旋转，翻译和缩放来创建复杂的3D效果。

> CSS中的2D和3D转换之间的区别是什么？ CSS是发生转换的维度。 2D变换会影响X和Y轴中的元素，而3D变换也包括Z轴，为转换增加了深度。这意味着3D变换可以在三个维度上旋转，移动和缩放元素，从而产生更身临其境和动态的效果。

>如何控制CSS 3D转换中的后面可见性？ CSS中的后面可见性属性控制元素的背面是否在不面对查看器时是否可见。该属性在元素旋转且后面变得可见的3D变换中特别有用。该属性采用两个值：“可见”，显示后面和“隐藏”。 CSS 3D转换中的转换 - 原始属性使您可以为转换指定原点。默认情况下，转换起源于元素的中心。但是，您可以使用Transform-Origin属性将其更改为元素中的任何点。该属性采用两个或三个值，代表x，y和可选为z轴。

>。