3D Transform div

Question

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.

Answer 1

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.

Dynamic Rotation Angle Demo