資料結構
網路
關係型資料庫管理系統
作業系統
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 次檢視
