Rating: ★★★★☆
    View: 211
    Download: 101
    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 :)



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




    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


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


    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