資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何使用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元素的底部位置有了很好的理解。
瀏覽量：190
