Sample code for implementing 3D book effect with CSS

Without further ado, let's take a look at the renderings first

insert image description here

The source code is as follows

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 100vh;
        background: #333333;
        background-size: cover;
    }
    .book{
        width: 400px;
        height: 600px;
        position: relative;
        background-color: #ffffff;
        transform: rotate(-37.5deg) skewX(10deg);
        box-shadow: -35px 35px 50px rgb(0,0, 0, 1);
        transition: 0.5s;
        /* The cursor is rendered as a pointer (a hand) indicating a link */
        cursor: pointer;
    }
    .book:hover{
        /* rotate Defines a 2D rotation, specifying the angle in the parameter. */
        /* skewX() defines a 2D skew transformation along the X axis.
            translate(x,y) defines a 2D translation.
          */
        transform: rotate(-37.5deg) skewX(10deg) translate(20px,-20px);
        /* box-shadow adds one or more shadows to a box */
        box-shadow: -50px 50px 100px rgba(0,0,0,1);
    }
    /* Pseudo-elements must be used with content and must be at least empty*/
    .book::before{
        content:'';
        height:100%;
        width:30px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
        transform: skewY(-45deg) translate(-30px,-15px); 
        box-shadow: inset -10px 0 20px raba(0,0,0,0,2);
        background: url(cofe.jpg);
    }
    .book::after{
            content: '';
            height: 30px;
            width: 100%;
            background: #fff;
            position: absolute;
            bottom: 0;
            left: 0;
            transform: skewX(-45deg) translate(15px,30px);
            background: url(cofe.jpg);

    }
    .book h2{
        position: absolute;
        bottom: 100px;
        left: 10px;
        font-size: 5em;
        line-height: 1em;
        color: rgb(110, 21, 21);
    }
    .book h2 span{
        background-image: url(cofe.jpg);
        background-attachment: fixed;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .book .write i{
        font-weight: 700;
    }
    .book .cover{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 70%;
        background-image: url(cofe.jpg);
        background-size: cover;
    }


</style>


<body>
    <div class="book">
        <div class="cover"></div>
        <h2>Book <span>javascript</span></h2>
        <span class="wirte"> written by fans</span>
    </div>
</body>
</html>

Summarize

This is the end of this article about how to achieve 3D book effect with CSS. For more relevant CSS 3D book content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

<<: Detailed process of installing Presto and connecting Hive in Docker

>>: Analysis and opinions on the design of the product details description page on Taobao website (picture)