HTML and CSS Reference
In-Depth Information
So how does this example work? Well, the only image used is the repeating
image tile for the front and back covers of the notepad; the rest of the graphics
were created using box-shadow , text-shadow , gradients, and web fonts. You learned
about these in previous chapters, so I won't explain them here. I'll also not discuss
the animated elements I've created using transitions, because you'll look at those
in detail later in this chapter. Here I'll just concentrate on the transforms. To start,
the markup is just some <article> s wrapped by a wrapper <div> :
<div id=”wrapper”>
e >
e >
e >
e >
</div>
To c re at e t h e b a s i c b To To k , a l l To f t h e p a g e s a re a b s To l u t e l y p To s i t i To n e d To n t To p To f
one another. The topic is then rotated in three dimensions using the following:
#wrapper
transform: perspective(1200px) rotateY(-9deg);
: ;
}
The pages are then moved into different positions in 3D space using the
following:
#front {
: ;
}
#p1 {
: ; * y g s s
p needed; Firefox does weird things with this example if
p you don't.*/
}
Search WWH ::




Custom Search