I am trying to create a div that can be "rotated" in 3D by grabbing the edge using
transform: rotateY(# deg);
My current setup involves a div, filled with a background color and an additional invisible div that is 20px aligned to the left edge. I added an event handler, onclick a JavaScript function using getElementById is called which currently just sets the rotateY to 60deg.
HTML
<div id = "square">
<div class="LeftRotate" onclick="rotateLeft()"></div>
</div>
JavaScript
function rotateLeft() {
getElementById("square").style.transform = rotateY(60deg);
}
Could anyone explain what is wrong with the code? It seems so simple but it does not work. Also I would like to build this into a more dynamic system so the div could actually be "rotated" dynamically (by the user), rather than just going to a position. Any advice? I was thinking about getting the change in the cursor, and using that in a for loop which increments the rotation of the window by the change in cursor.
You can do it using the below code:
1.First thing is that the value is a string so should be given within quotes.
2.Second, the transform
requires vendor prefixes to support older versions.
3.Third, it requires a document.
in front of getElementById
.
function rotateLeft() {
document.getElementById("square").style["-webkit-transform"]= "rotateY(60deg)";
document.getElementById("square").style["-moz-transform"]= "rotateY(60deg)";
document.getElementById("square").style["transform"]= "rotateY(60deg)";
}
Demo with Inline Styles | Demo with Class
Note: Unless your rotation angles are dynamically generated, I would recommend using classes instead of inline styles.
Bonus Sample: This is a very rough sample on how to dynamically change the rotation angle based on input given by user in the text box. Just give a rotation angle (just numeric) in the text box and then click on the div
with text.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.