搜索

首页 >web前端 >css教程 >CSS中的3D变换功能

CSS中的3D变换功能

William Shakespeare
William Shakespeare原创
2025-02-15 10:15:11913浏览

CSS中的3D变换功能

钥匙要点

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

>

深度z轴

    在二维屏幕上，考虑到Z坐标为零的表面很有用。正面的Z值将对象向您移动（在屏幕前），而负Z值将对象移开（屏幕后面）。当添加透视图时，更遥远的z值会导致对象完全消失。
  • 在这里有一些要注意的事情：
    • CSS只能在三维空间中转换二维HTML元素。元素本身保持平坦，深度为零。可以在z平面中扩展，但这不会
  • 将正方形挤入立方体。您仍然可以创建一个立方体，但需要六个元素才能使每一侧面。
    • > CSS 3D转换非常适合页面效果 - 但不要指望您能够创建下一个Minecraft或“使命召唤”。使用WebGL等技术更好地实施了复杂模型。

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

  • > Internet Explorer不支持转换风格：Preserve-3D，这使得无法创建3D场景。
    • >所有版本的Safari都必须使用供应商预定的-webkit-backface-visisibility隐藏后面的面孔。所有其他浏览器都支持Backface-Visibil.
>以下各节描述了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）。
    • z - 表示旋转轴的向量的z坐标（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（）函数。
    • >
  • 后面可见性
    • 当元素旋转X或Y轴旋转超过90，但在任一方向上均小于270度时，显示了元件的后部。后部有效地是镜像，默认情况下可见。
  • >
    • 可以通过设置背面可视性来隐藏后部：隐藏； - 如果应用于＃box2：

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：来修改它。

    x是一个关键字（左中的，中心或右）或相对于元素宽度的百分比（0％，50％和100％等于关键字）。
  • > 相对于元素高度（0％，50％和100％等于关键字），
    • y是关键字（顶部，中心或底部）或百分比。
    • >左上角消失点：

<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效果可以为您的网页和应用程序添加另一个维度。

>

    使用CSS转换
  • 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轴。

>。

>我可以动画CSS 3D变换吗？这使您可以创建平稳，渐进的转换，从而增强用户体验。您可以使用各自的CSS属性控制动画的持续时间，时序函数和延迟。

>是否在所有浏览器中支持CSS 3D变换？

>

大多数现代浏览器支持CSS 3D变换。但是，最好检查每个功能的特定浏览器支持，因为某些旧版本可能无法完全支持所有功能。您可以使用诸如我可以使用的工具检查CSS 3D变换的当前浏览器支持。

如何使用CSS 3D变换创建3D翻转效果？通过将rotatey（）或rotatex（）函数与过渡相结合，使用CSS 3D变换创建。旋转函数将元素围绕其Y或X轴翻转，而过渡会创建翻转动画。您可以使用过渡 - 持续和过渡 - 插入功能的速度控制翻转的速度和时机。

>

> CSS 3D转换中的matrix3d（）函数是什么？ ）CSS 3D转换中的功能使您可以指定包含16个值的4×4转换矩阵。此功能可以代表任何3D变换，使其成为创建复杂3D效果的强大工具。但是，使用它可能非常复杂，因为它需要对矩阵数学有深刻的了解。

>

以上是CSS中的3D变换功能的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css safari less html webkit edge Object if for while include math using Length finally Property number function default this position transform transition animation idea webgl Translate Other
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：A Full-screen Bootstrap Carousel with Random Initial Image下一篇：Retrofit Your Website as a Progressive Web App

相关文章

查看更多