HTML and CSS Reference
In-Depth Information
Ye s I ' v e u s e d it h e s a m e c a r d fl i p b e h a v i of r a s b e f of r e , b u it i n s it e a d of f a n i m a it i n g i it
via a transition and triggering it on hover/focus via pseudo-classes, I've put the
animation in a CSS animation, like this:
@keyframes form-rotate {
m {
: ;
}
o {
: ;
}
}
.form-rotate {
animation: form-rotate 1s forwards;
}
The animation keyframes rotate whatever the animation is applied to around
the X axis by 180 degrees, and the animation is applied to any element that is given
a class of
form-rotate
. This will be the
<input type=”submit”>
.
The other noteworthy part of this example is the
<h1>
, and the fact that the
form slides into the screen and out again when the
<h1>
is clicked (in browsers that
support animations). To move the
<h1>
to where it is initially, I used a transform:
h1 {
: ;
transform: rotate(90deg) translate(9.5rem,-23rem);
}
