用css怎么样做3D立体书本的效果？

发布时间：2023-08-04 13:57:00 所属栏目：语言来源：

导读： 本文给大家分享的是用css做3D立体书本效果的内容，对于用CSS实现3D效果我们也都有了解过，这次分享的示例同样也有一定的参考价值，实现效果及代码如下，感兴趣的朋友可以了解看看。

源代码如下

<!DOCTYPE h

本文给大家分享的是用css做3D立体书本效果的内容，对于用CSS实现3D效果我们也都有了解过，这次分享的示例同样也有一定的参考价值，实现效果及代码如下，感兴趣的朋友可以了解看看。

源代码如下

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

        /* 光标呈现为指示链接的指针（一只手） */

        cursor: pointer;

    }

    .book:hover{

        /* rotate 定义 2D 旋转，在参数中规定角度。 */

        /* skewX()定义沿着 X 轴的 2D 倾斜转换。

            translate(x,y) 定义 2D 转换。

          */

        transform: rotate(-37.5deg) skewX(10deg) translate(20px,-20px);

        /* box-shadow 向框添加一个或多个阴影 */

        box-shadow: -50px 50px 100px rgba(0,0,0,1);

    }

    /* 伪元素必须配合content进行使用，至少为空 */

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

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!