HTML and CSS Reference
In-Depth Information
FIREFOX
BAD
HOVER
?
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!
ROTATE3D
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.