Rotating a cube about its x axis - html

I am done designing a 3-D cube in pure html.
The cube is rotating fine about its y and z axis, but when I try to rotate it about its axis it behaves a little strange.
Instead of rotating about its new rotated x axis it just rotates about the original X axis.
You can see the code I've provided and suggest necessary amends.
Here is the CODE PEN link for you to tinker:
<a href="http://codepen.io/deviljinkazama/pen/KzoxEL">Link</a>

Related

Why is the y axis inverted in the HTML DOM and in SVG?

The y axis instead of going upwards, goes downwards, whilst the x axis has the normal sense from left to right. Why?
It is one of the most annoying obstacles when doing the graphic part of a website because the geometry has to be recalculated, as the usual calculation as in the cartesian plane will be wrong. So, why does this happen? Is there a specific reason? Did they not notice that they were betraying traditional mathematics?

How can I rotate an object around its local Y axis rather than the global Y axis using actionscript-3?

I have a flat object, eventually it will be a circle, but for now I just have a 2d square on the stage. I tip it back 75 degrees, and then rotate it around the y axis.
I have this code which has the object rotating, but it rotates around the global Y axis. But I want it to rotate around it's own Y axis which is tipped 15 degrees from vertical.
box_mc.rotationY=0;
box_mc.rotationX=-75;
addEventListener(Event.ENTER_FRAME, onYRotate);
function onYRotate(e:Event):void{
box_mc.rotationY+=2;
}
Can someone help me change my code so it rotates on its own Y axis?

AS3: 3D axes rotation

I've built a 3D icosahedron in AS3 that I'm going to use as a 20-sided die. With rotationX, rotationY, and rotationZ all set to 0, it looks like the top left picture. Now I'm trying to find the proper rotations for each number so that the face is perpendicular to the screen, like in the top right picture for #1. The problem is that when I rotate it one way, the axes of rotation are changed as well. For example, in the bottom left picture when I was trying to do #2, I set rotationZ to 108, but now rotationX will not turn it straight downwards as it did before.
I could just eyeball it and get approximate rotations that looked about right, but I would rather have exact rotations. Any ideas?
Nevermind, I needed to use Matrix3D instead for my rotations.

HTML5/Javascript: how to get real size/position of a 3D transformed div?

I wonder if someone can help me resolving this problem:
I have a DIV,
I apply 3d transform on it to rotate it and translate it in the 3d space.
Now: how can I get the REAL (on screen, 2D) position and size of that transformed DIV?
thanks all

Invert Y axis on coordinate plane?

On a coordinate plane, what is the equation to flip the image upside down?
Could it be as simple as y = -y?