纯css模拟书本立体交互倾斜效果代码

代码语言:html

所属分类:悬停

代码描述:纯css模拟书本立体交互倾斜效果代码

代码标签: 书本 立体 交互 倾斜 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        html {
            height: 100%;
        }
        body {
            margin: 0;
            min-height: 100%;
            background-color: #fff;
            font-family: Arial, sans-serif;
            font-size: 14px;
            line-height: 20px;
            color: #333;
        }

        /*Webflow standard classes */
        html.w-mod-touch * {
            background-attachment: scroll !important;
        }
        .w-block {
            display: block;
        }
        .w-inline-block {
            max-width: 100%;
            display: inline-block;
        }


        .w-webflow-badge,
        .w-webflow-badge * {
            position: static;
            left: auto;
            top: auto;
            right: auto;
            bottom: auto;
            z-index: auto;
            display: block;
            visibility: visible;
            overflow: visible;
            overflow-x: visible;
            overflow-y: visible;
            box-sizing: border-box;
            width: auto;
            height: auto;
            max-height: none;
            max-width: none;
            min-height: 0;
            min-width: 0;
            margin: 0;
            padding: 0;
            float: none;
            clear: none;
            border: 0 none transparent;
            border-radius: 0;
            background: none;
            background-image: none;
            background-position: 0% 0%;
            background-size: auto auto;
            background-repeat: repeat;
            background-origin: padding-box;
            background-clip: border-box;
            background-attachment: scroll;
            background-color: transparent;
            box-shadow: none;
            opacity: 1.0;
            transform: none;
            transition: none;
            direction: ltr;
            font-family: inherit;
            font-weight: inherit;
            color: inherit;
            font-size: inherit;
            line-height: inherit;
            font-style: inherit;
            font-variant: inherit;
            text-align: inherit;
            letter-spacing: inherit;
            text-decoration: inherit;
            text-indent: 0;
            text-transform: inherit;
            list-style-type: disc;
            text-shadow: none;
            font-smoothing: auto;
            vertical-align: baseline;
            cursor: inherit;
            white-space: inherit;
            word-break: normal;
            word-spacing: normal;
            word-wrap: normal;
        }
        .w-webflow-badge {
            position: fixed !important;
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 2147483647 !important;
            top: auto !important;
            right: 12px !important;
            bottom: 12px !important;
            left: auto !important;
            color: #AAADB0 !important;
            background-color: #fff !important;
            border-radius: 3px !important;
            padding: 6px 8px 6px 6px !important;
            font-size: 12px !important;
            opacity: 1.0 !important;
            line-height: 14px !important;
            text-decoration: none !important;
            transform: none !important;
            margin: 0 !important;
            width: auto !important;
            height: auto !important;
            overflow: visible !important;
            white-space: nowrap;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0px 1px 3px rgba(0, 0, 0, 0.1);
        }
        .w-webflow-badge > img {
            display: inline-block !important;
            visibility: visible !important;
            opacity: 1 !important;
            vertical-align: middle !important;
        }

        .w-richtext:before,
        .w-richtext:after {
            content: " ";
            display: table;
        }
        .w-richtext:after {
            clear: both;
        }
        .w-richtext[contenteditable="true"]:before,
        .w-richtext[contenteditable="true"]:after {
            white-space: initial;
        }

        /*-----------------------*/

        h3 {
            margin-top: 20px;
            margin-bottom: 10px;
            font-size: 24px;
            line-height: 30px;
            font-weight: bold;
        }

        h6 {
            margin-top: 10px;
            margin-bottom: 10px;
            font-size: 12px;
            line-height: 18px;
            font-weight: bold;
        }

        p {
            margin-top: 0;
            margin-bottom: 10px;
        }

        a {
            text-decoration: underline;
        }

        .scene {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 100%;
            height: 54vw;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: stretch;
            -webkit-align-items: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
            background-color: #fff;
            -webkit-perspective: 4000px;
            perspective: 4000px;
            -webkit-perspective-origin: 50% 0%;
            perspective-origin: 50% 0%;
        }

        .book-wrap {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 57vw;
            margin-top: 8vw;
            margin-bottom: 8vw;
            padding-right: 1%;
            padding-left: 1%;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-perspective: 4000px;
            perspective: 4000px;
            -webkit-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
            -webkit-transform: translate3d(0px, 5%, -264px) rotateX(27deg) rotateY(0deg) rotateZ(-10deg);
            transform: translate3d(0px, 5%, -264px) rotateX(27deg) rotateY(0deg) rotateZ(-10deg);
            -webkit-transition: -webkit-transform 2000ms cubic-bezier(.165, .84, .44, 1);
            transition: -webkit-transform 2000ms cubic-bezier(.165, .84, .44, 1);
            transition: transform 2000ms cubic-bezier(.165, .84, .44, 1);
            transition: transform 2000ms cubic-bezier(.165, .84, .44, 1), -webkit-transform 2000ms cubic-bezier(.165, .84, .44, 1);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .book-wrap:hover {
            -webkit-transform: translate3d(0px, 5%, -264px) rotateX(13deg) rotateY(0deg) rotateZ(-3deg);
            transform: translate3d(0px, 5%, -264px) rotateX(13deg) rotateY(0deg) rotateZ(-3deg);
        }

        .book-cover-left {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            border-top-left-radius: 4%;
            border-bottom-left-radius: 4%;
            background-color: #2e1800;
            box-shadow: inset 4px -4px 4px 1px #635648, inset 7px -7px 4px 0 #221b14;
            -webkit-perspective: 4000px;
            perspective: 4000px;
            -webkit-transform: translate3d(0px, 0px, -1px);
            transform: translate3d(0px, 0px, -1px);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .book-cover-right {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            border-top-right-radius: 4%;
            border-bottom-right-radius: 4%;
            background-color: #2e1800;
            box-shadow: inset -4px -4px 4px 1px #635648, inset -7px -7px 4px 0 #221b14;
        }

        .layer1 {
            position: fixed;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            margin: 20px 10px 10px;
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-transform: translate3d(0px, 0px, 5px);
            transform: translate3d(0px, 0px, 5px);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .page-left {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            border-top-left-radius: 1%;
            border-bottom-left-radius: 1%;
            background-color: #fff;
            box-shadow: inset 0 0 26px 2px #d8cccc, -1px 1px 13px 0 rgba(34, 27, 20, .81);
        }

        .layer-text {
            position: fixed;
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 97%;
            margin: 20px 10px 18px;
            -webkit-box-pack: start;
            -webkit-justify-content: flex-start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-perspective: 4000px;
            perspective: 4000px;
            -webkit-perspective-origin: 50% 50%;
            perspective-origin: 50% 50%;
            -webkit-transform: translate3d(0px, 0px, 32px);
            transform: translate3d(0px, 0px, 32px);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .layer-text.right {
            -webkit-transform: translate3d(-37px, 0px, 32px);
            transform: translate3d(-37px, 0px, 32px);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .page-left-2 {
            position: relative;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            border-top-left-radius: 18%;
            border-bottom-left-radius: 1%;
            background-color: #fff;
            box-shadow: inset 0 0 7px 4px hsla(0, 13%, 82%, .43), -1px 1px 13px 0 rgba(34, 27, 20, .49);
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(17deg) rotateZ(0deg);
            -webkit-transform-origin: 100% 50%;
            -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
            -webkit-transition: -webkit-transform 650ms cubic-bezier(.165, .84, .44, 1);
            transition: -webkit-transform 650ms cubic-bezier(.165, .84, .44, 1);
            transition: transform 650ms cubic-bezier(.165, .84, .44, 1);
            transition: transform 650ms cubic-bezier(.165, .84, .44, 1), -webkit-transform 650ms cubic-bezier(.165, .84, .44, 1);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .page-left-2:hover {
            -webkit-transform: rotateX(0deg) rotateY(7deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(7deg) rotateZ(0deg);
        }

        .left-side {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 49%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            -webkit-perspective: 4000px;
            perspective: 4000px;
            -webkit-perspective-origin: 0% 50%;
            perspective-origin: 0% 50%;
            -webkit-transform: rotateX(0deg) rotateY(20deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(20deg) rotateZ(0deg);
            -webkit-transform-origin: 100% 50%;
            -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .right-side {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            width: 49%;
            -webkit-perspective: 4000px;
            perspective: 4000px;
            -webkit-perspective-origin: 0% 50%;
            perspective-origin: 0% 50%;
            -webkit-transform: rotateX(0deg) rotateY(-1deg) rotateZ(0deg);
            transform: rotateX(0deg) rotateY(-1deg) rotateZ(0deg);
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        .center {
            width: 3%;
            background-image: -webkit-radial-gradient(circle farthest-corner at 56% -8%, #fff 8%, transparent 0), -webkit-radial-gradient(circle farthest-corner at 50% 108%, #fff 8%, transparent 0), -webkit-linear-gradient(0deg, #635648, #2e1800 21%, #635648 30%, #2e1800 48%, #635648 68%, #2e1800 79%, #635648);
            background-image: radial-gradient(circle farthest-corner at 56% -8%, #fff 8%, transparent 0), radial-gradient(circle farthest-corner at 50% 108%, #fff 8%, transparent 0), linear-gradient(90deg, #635648, #2e1800 21%, #635648 30%, #2e1800 48%, #635648 68%, #2e1800 79%, #635648);
        }

        .corner-fold {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 30px;
            height: 30px;
            border-right: 1px solid hsla(0, 13%, 82%, .55);
            border-bottom: 1px solid hsla(0, 13%, 82%, .55);
            background-image: -webkit-linear-gradient(315deg, transparent 47%, #f0f0f0 48%, #fff 55%, #f6f6f6);
            background-image: linear-gradient(135deg, transparent 47%, #f0f0f0 48%, #fff 55%, #f6f6f6);
            box-shadow: 6px 6px 9px -4px hsla(0, 13%, 82%, .53);
        }

        .corner {
            position: absolute;
            left: 0px;
            top: 27px;
            width: 5vw;
            height: 5vw;
            background-image: -webkit-linear-gradient(315deg, #fff 30%, transparent);
            background-image: linear-gradient(135deg, #fff 30%, transparent);
            box-shadow: inset 13px 0 17px -12px hsla(0, 13%, 82%, .43);
        }

        .corner2 {
            position: absolute;
            left: 28px;
            top: 0px;
.........完整代码请登录后点击上方下载按钮下载查看

网友评论0