HTML and CSS Reference
In-Depth Information
The JavaScript you need is:
function
flip
(
id
)
{
// get a handle on the flippable region
var
front
=
getElement
(
'front'
);
var
back
=
getElement
(
'back'
);
// again, just a simple way to see what the state is
var
classes
=
front
.
className
.
split
(
' '
);
var
flipped
=
classes
.
indexOf
(
'flipped'
);
if
(
flipped
>=
0
)
{
// already flipped, so return to original
front
.
className
=
'normal'
;
back
.
className
=
'flipped'
;
FLIPPED
=
false
;
}
else
{
// do the flip
front
.
className
=
'flipped'
;
back
.
className
=
'normal'
;
FLIPPED
=
true
;
}
}
Finally, here is the relevant CSS:
#back
,
#front
{
position
:
absolute
;
width
:
100
%
;
height
:
100
%
;
-
webkit
-
backface
-
visibility
:
hidden
;
-
webkit
-
transition
-
duration
:
.5s
;
-
webkit
-
transform
-
style
:
preserve
-3
d
;
-
moz
-
backface
-
visibility
:
hidden
;
-
moz
-
transform
-
style
:
preserve
-3
d
;
-
moz
-
transition
-
duration
:
.5s
;
}
.normal
{
-
webkit
-
transform
:
rotateY
(
0
deg
);
-
moz
-
transform
:
rotateY
(
0
deg
);
}
.flipped
{
-
webkit
-
user
-
select
:
element
;
-
webkit
-
transform
:
rotateY
(
180
deg
);
-
moz
-
transform
:
rotateY
(
180
deg
);
}
