如何使用 JavaScript 设置 3D 元素底部位置？

在本教程中，我们将学习如何使用 JavaScript 设置 3D 元素的底部位置。在网页中，处理 3D 元素可能很棘手。使用 JavaScript，我们必须设置顶部、底部、侧面等。要设置 3D 元素的底部位置，我们使用元素样式对象的 perspectiveOrigin 属性。

使用 style.perspectiveOrigin 属性

在 JavaScript 中，style.perspectiveOrigin 属性用于设置 3D 元素的底部位置或基准位置。首先，我们使用 document.getElementById() 方法获取元素对象，然后设置 style.perspectiveOrigin 属性。

语法

const object = document.getElementById('element_id') 
object.style.perspectiveOrigin = "x-axis y-axis | inherit | initial"

在上述语法中，“element_id” 是 3D 元素的 id。我们使用 document.getElementById() 方法访问元素，然后使用 style.perspectiveOrigin 属性设置底部位置。

参数

  • x 轴 - 元素在 x 轴上的位置。默认值为 50%。

  • y 轴 - 元素在 y 轴上的位置。默认值为 50%。

  • inherit - 继承其父元素的属性。

  • initial - 设置为默认值。

示例 1

您可以尝试运行以下代码，以使用 JavaScript 设置 3D 元素的底部位置。代码中有三个 DIV。

<!DOCTYPE html> 
<html> 
<head> 
   <style> 
      #div1 { 
         position: relative; 
         margin: auto; 
         height: 200px; 
         width: 200px; 
         padding: 20px; 
         border: 2px solid blue; 
         perspective: 100px; 
      }  
      #div2 { 
         padding: 80px; 
         position: absolute; 
         border: 2px solid BLUE; 
         background-color: yellow; 
         transform: rotateX(45deg); 
      }  
      #div3 { 
         padding: 50px; 
         position: absolute; 
         border: 2px solid BLUE; 
         background-color: green; 
         transform: rotateX(30deg); 
      } 
   </style> 
</head> 
<body>
   <p>Change the property of div</p>  
   <button onclick = " display ()">Set Perspective Origin Position</button> 

   <div id = "div1">DIV1 
      <div id = "div2">DIV2</div> 
      <div id = "div3">DIV3</div> 
   </div> 
   <script> 
      function display() { 
         document.getElementById("div1").style.perspectiveOrigin = "20px 10%"; 
      } 
   </script> 
</body> 
</html>

示例 2

在下面的示例中，我们使用了 style.perspectiveOrigin 属性，通过用户输入使用 JavaScript 设置 3D 元素的底部位置。我们使用了输入字段来获取用户输入，以设置 3D 元素的底部位置。“设置透视原点位置” 函数在每次我们点击“设置透视原点位置” 按钮时执行。该函数首先通过 document.getElementById() 方法和 value 属性获取输入字段的值，然后使用输入字段的值设置 style.perspectiveOrigin 属性。

<html> 
<head> 
   <style> 
      #div1 { 
         position: relative; 
         margin: auto; 
         height: 150px; 
         width: 150px; 
         padding: 20px; 
         border: 2px solid black; 
         perspective: 180px; 
      } 
      #div2 { 
         padding: 80px; 
         position: absolute; 
         border: 2px solid black; 
         background-color: limegreen; 
         transform: rotateX(45deg); 
      } 
      #div3 { 
         padding: 50px; 
         position: absolute; 
         border: 2px solid black; 
         background-color: cornflowerblue; 
         transform: rotateX(30deg); 
      } 
   </style> 
</head> 
<body> 
   <p>Fill the x-axis and y-axis positions (with %) below and click the "Set Perspective Origin Position" button to set the bottom position of the 3D element</p> 
   <input id="input_field" type="text" name="bottom" placeholder = "10%  60%"><br> 
   <button onclick = "setBottom()"> Set Perspective Origin Position </button> 
   <div id = "div1"> DIV1 
      <div id = "div2"> DIV2 </div> 
      <div id = "div3"> DIV3 </div> 
   </div>  
   <script> 
      function setBottom() { 
         const root = document.getElementById('div1') 
         const input_field = document.getElementById('input_field') 
         root.style.perspectiveOrigin = input_field.value 
      } 
   </script> 
</body> 
</html>

在本教程中，我们学习了如何使用 JavaScript 设置 3D 元素的底部位置。我们看到了两个示例，它们都使用 style.perspectiveOrigin 属性。在第一个示例中，我们看到了如何使用按钮点击事件设置 3D 元素的底部。在第二个示例中，我们从输入字段获取 style.perspectiveOrigin 属性的值，该值用于获取用户希望设置在属性中的值。用户现在对如何设置 3D 元素的底部位置有了正确的理解。

更新于: 2022年10月12日

190 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告