如何使用 JavaScript 在 3D 空间中呈现嵌套元素?
本教程将教您如何使用 JavaScript 在 3D 空间中呈现嵌套元素。
您可以使用 transform 属性来倾斜、缩放、平移或旋转元素。它会改变视觉格式模型的坐标空间。transform 属性可以采用关键字值 none 或一个或多个变换函数值。对于多个函数值，必须首先提到 rotate。因为在变换函数中按顺序(从左到右)乘法，所以复合变换可以应用在相反的方向，即从右到左。
使用 HTML DOM 样式 transformation-style 属性在 3D 空间中呈现嵌套元素。transform-style 属性确定在 3D 空间中，元素的子元素是在元素的平面中定位还是展平。如果元素的子元素被扁平化，则其子元素将不会在 3D 空间中独立存在。由于此属性不会被继承，因此必须为元素的非叶子后代设置此属性。此属性应与 transform 属性一起使用。
以下是使用 JavaScript 在 3D 空间中渲染嵌套元素的方法。
使用 transformStyle 属性
transformStyle 属性指定元素的子元素是定位在 3D 空间中还是相对于元素的平面扁平化。它通常用于嵌套变换。也就是说，它可用于保留在其父元素的三维空间中已更改的元素的三维空间。
preserve-3d 值允许子元素保留其 3D 位置。transform-style 属性不会向下传递。因此，您应该将其应用于任何您想要将其子代更改为三维空间的后代。
语法
document.getElementById("div2").style.transformStyle = "preserve-3d";
使用 getElementById() 方法获取 div2 元素，并将 transform-style 属性更改为 retain-3d。
示例
在此示例中，div2 元素在 <style> 部分中具有一个 transform 样式属性，用户将其定义为 flat。此属性是 3D 空间中元素的默认值。HTML DOM 样式 transform-style 属性将其更改为 retain-3d。此属性有助于保留元素的 3D 特性。
<html> <head> <style> #div1 { position: relative; margin: 10px; height: 200px; width: 200px; padding: 20px; border: 2px solid blue; } #div2 { padding: 80px; position: absolute; border: 2px solid BLUE; background-color: yellow; transform: rotateY(45deg); transform-style: flat; } #div3 { padding: 50px; position: absolute; border: 2px solid BLUE; background-color: orangered; transform: rotateY(60deg); } #div4 { padding: 110px; height: 50px; position: absolute; border: 2px solid BLUE; background-color: red; transform: rotateY(60deg); } </style> </head> <body> <h2> Nested elements are rendered in 3D space using <i> preserve-3d </i> value </h2> <button onclick="myFunction()">Set</button> <div id="div1"> DIV1 <div id="div2"> DIV2 <div id="div3"> DIV3 </div> <div id="div4"> DIV4 </div> </div> </div> <script> function myFunction() { document.getElementById("div2").style.transformStyle = "preserve-3d"; } </script> </body> </html>
使用 setProperty() 属性
要更改声明块中的现有属性，请使用 setProperty() 函数。它是一个必需的参数，包含一个表示必须设置的属性名称的字符串。表示新值的字符串包含在值中，这是一个可选参数。
顾名思义，flat 值将使组件展平到其父级平面，从而防止它们沿 z 轴定位。'transform' 属性将元素转换为第三维。这支持"perspective"属性，用于设置 z 空间中的透视，以及"backface-visibility"属性，用于显示 3D 转换元素的反面。
语法
var x = document.getElementById("div2").style;
x.setProperty("transform-style", "flat");
getElementById() 函数用于获取 div2 元素。使用 setProperty 属性，CSS 属性设置为 transform 样式，其值为 flat。
示例
在此示例中，我们创建了表示块的 3D 转换的分区。获取元素 div2，并将嵌套元素在 3D 空间中渲染的变换属性转换为平面，通过将元素展平到其父级平面中来防止元素沿 z 轴定位。
<html> <head> <style> #div1 { position: relative; margin: 40px; height: 210px; width: 220px; padding: 20px; border: 3px solid brown; } #div2 { padding: 80px; position: absolute; border: 2px solid BROWN; background-color: skyblue; transform: rotateY(45deg); transform-style: preserve-3d; } #div3 { padding: 50px; position: absolute; border: 2px solid brown; background-color: blue; transform: rotateY(55deg); } #div4 { padding: 110px; position: absolute; border: 2px solid brown; background-color: blueviolet; transform: rotateY(70deg); } </style> </head> <body> <h2> Nested elements are rendered in 3D space using <i>setProperty()</i> property </h2> <div id="div1"> DIV1 <div id="div2"> DIV2 <div id="div3"> DIV3 </div> <div id="div4"> DIV4 </div> </div> </div> <br> <br> <br> <br> <button onclick="myFunction()"> Set property </button> <!-- Script to set the property --> <script> function myFunction() { var x = document.getElementById("div2").style; x.setProperty("transform-style", "flat"); } </script> </body> </html>
在本教程中，我们学习了如何使用 JavaScript 中的 transform 样式属性的 preserve-3d 值和 flat 值在 3D 空间中呈现嵌套元素。
