HTML and CSS Reference
In the transform-3drotate-x-y-z.html example file I've applied the :hover and
:focus effects to the parent #wrapper <div> but not the actual <article> s,
because some browsers (e.g., Firefox) will only continue to register the hover
event when the mouse is over the actual element being transitioned, not the
space it originally occupied.
Therefore, if you set the :hover effect on the actual <article> s, it will stop
as soon as the space taken up by the elements shrinks so that they move off
the mouse pointer, producing a clumsy jarring effect. This is not a problem in
most browsers. But in Firefox, you should still put the :hover/:focus on the
parent element wherever possible.
This issue is explained better in an example, so try loading the file transform-
3drotate-bad-hover.html in Firefox, and you'll see what I mean. Of course,
this problem may be eliminated in the future. If you no longer see the prob-
lem, you know it's been fixed!
I've included rotate3D in a separate section because it works in a different manner
than the other 3D rotate functions. In the transform-3drotate-rotate3D.html file,
you'll see three copies of an example with the same rotations applied to them as
in the previous example! The difference is that this time I used rotate3D in each
case, not rotateX , rotateY , and rotateZ . Let's look at equivalents:
transform: rotateX(180deg); is equivalent to rotate3D(1,0,0,180deg);
transform: rotateY(180deg); is equivalent to rotate3D(0,1,0,180deg);
transform: rotateZ(180deg); is equivalent to rotate3D(0,0,1,180deg);
So how do these work? Notice that the rotate3D function takes four arguments.
The fourth one is the number of degrees (or radians) you want the element to rotate
through. The first three unitless values specify a direction vector for the element
to rotate around. So 1,0,0 is one rotation along the X axis, and none in the Y or Z
directions. So, in the first example, the element rotates around the X axis.