写一个3D书本的

项目里，需要一个类似于3D书本的效果，从网上找了下，自己写了下面的代码，直接上代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link rel="stylesheet" type="text/css" href="css/rent.css"/>
        <title>3D Book</title>
        <style type="text/css">
            .wrap{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                background: #333;
                background-size: cover;
            }
            .book{
                width:30%;
                height: 600px;
                position: relative;
                background: #fff;
                transform: rotate(-37.5deg) skewX(10deg);
                box-shadow:-35px 35px 50px rgba(0,0,0,1);
                transition: 0.5s;
                cursor: pointer;
            }
            .book:hover{
                transform: rotate(-37.5deg) skewX(10deg) translate(20px,-20px);
                box-shadow: -50px 50px 100px rgba(0,0,0,1);
            }
            .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 rgba(0,0,0,2);
            }
            .book::after{
                content: '';
                height: 30px;
                width: 100%;
                background: #fff;
                position: absolute;
                bottom: 0;
                left: 0;
                transform: skewX(-45deg) translate(15px,30px);
            }
            .book h2{
                position: absolute;
                bottom: 100px;
                left: 10px;
                font-size: 5em;
                line-height: 1em;
                /* color: #fff; */
            }
            /* .book h2 span{
                background: url(img/fonts.png);
                background-attachment: fixed;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            } */
            .book .write{
                position: absolute;
                bottom: 20px;
                right: 20px;
                color: black;
                font-size: 0.8em;
                padding-top: 5px;
                font-weight: 500;
                border-top-left-radius: 1px solid #000;
            }
            .book .write i{
                font-weight: 700;
            }
            .book .cover{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 70%;
                background: url(img/kf.jpg);
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="book">
                <div class="cover"></div>
                <h2>Book <span>javascript</span></h2>
                <span class="write">written by <i>momomo</i></span>
            </div>
        </div>
    </body>
</html>

效果类似于这种，移动上去会上下浮动，不知道怎么上动图，给张平面图展示，喜欢的可以自己去敲敲，其中-webkit-background-clip: text;被我注释了是因为这个动画属性目前只支持谷歌内核，大家就不要用了。







            

            
posted @ 
2020-06-11 10:36 
a534158125 
阅读(100) 
评论(0) 
编辑 
收藏 
举报