• Animated Books with CSS 3D Transforms

    Posted on August 20, 2013 by in Tutorials, Web & Graphic Design

    AnimatedBooks

    VIEW DEMO DOWNLOAD SOURCE

    In this playground we’ll show you some creative, animated books with CSS 3D transforms and transitions.
    We’ll show you two types of book designs: hardcover and paperback. Both were made to be easily modifiable in some of their content parts using CSS, images, anchors and some extra little details :)

    Please note: this only works as intended in browsers that support the respective CSS properties.

    HARDCOVER BOOK

    AnimatedBooks_01

    The hardcover book consists of three cubes: hardcover front, book spine and hardcover back. Each part uses pseudo-elements to provide some thickness.

    cubes

    PAPERBACK

    AnimatedBooks_02

    In contrast to the hardcover, the paperback is a bit simpler. It is made from flat surfaces like the pages and does not include a book spine: paperback front, ruled paper and paperback back

    :HOVER EFFECTS

    For both books I use the technique of transitioning on “hover on” and “hover off” which is achieved by simply defining the “hover on” transition in the :hover class and the “hover off” transition in the original class declaration of the respective element.

    Hover on

    When we opened the book, the cover changes from “z-index: 100;” to 0.
    The pages have different transition durations, which creates a smooth opening.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    .book:hover > .hardcover_front {
        transform: rotateY(-145deg) translateZ(0);
        z-index: 0;
    }
    .book:hover > .page li:nth-child(1) {
        transform: rotateY(-30deg);
        transition-duration: 1.5s;
    }
    .book:hover > .page li:nth-child(2) {
        transform: rotateY(-35deg);
        transition-duration: 1.8s;
    }
    .book:hover > .page li:nth-child(3) {
        transform: rotateY(-118deg);
        transition-duration: 1.6s;
    }
    .book:hover > .page li:nth-child(4) {
        transform: rotateY(-130deg);
        transition-duration: 1.4s;
    }
    .book:hover > .page li:nth-child(5) {
        transform: rotateY(-140deg);
        transition-duration: 1.2s;
    }

    Hover off

    When we close the book, we can avoid the overlapping of the pages on the cover by reducing the transition duration of the pages.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    .hardcover_front{
        transition: all 0.8s ease, z-index 0.6s;
    }
    .page > li {
        width: 100%;
        height: 100%;
        transform-origin: left center;
        transition-property: transform;
        transition-timing-function: ease;
    }
    .page > li:nth-child(1) {
        transition-duration: 0.6s;
    }
    .page > li:nth-child(2) {
        transition-duration: 0.6s;
    }
    .page > li:nth-child(3) {
        transition-duration: 0.4s;
    }
    .page > li:nth-child(4) {
        transition-duration: 0.5s;
    }
    .page > li:nth-child(5) {
        transition-duration: 0.6s;
    }

    COVER DESIGN

    The cover design is pretty straightforward; I’ve added the class “coverDesign” as an initial configuration and a second class for backgrounds or images.

    An alternative of placing an image on the cover is the following:

    1
    <img src="" width="100%" height="100%"></img>

    To add a little red ribbon to the front cover, simply add:

    1
    <span class="ribbon"></span>

    And that’s it! I hope it’s useful and inspiring!

    VIEW DEMO DOWNLOAD SOURCE

    Source: Codrops

    301 total views, 1 views today

    Share and Enjoy

    • Facebook
    • Twitter
    • Delicious
    • LinkedIn
    • StumbleUpon
    • Add to favorites
    • Email
    • RSS
Pinterest
Email
Print