ANIMATED BOOKS WITH CSS 3D TRANSFORMS

    Rating: ★★★★☆
    View: 172
    Download: 88
    Từ khóa:

    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 :)

    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.

    .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.
    .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:

    img src="" width="100%" height="100%">
    To add a little red ribbon to the front cover, simply add:
    

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

    loading Đang tải...

    template được ưa chuộng