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);
Search WWH ::

Custom Search