纯css实现3d翻书效果-html代码-BFW代码库

纯css实现3d翻书效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 3D Bending Effect - Page Flip</title>
    <style>
        /* remember to use - transform-style: preserve-3d; */
        html,body {
            height: 100%;
            overflow: hidden;
        }
        body {
            background: radial-gradient(#E4CEA6, #9C8763);
            -webkit-perspective: 900px;
            perspective: 900px;
            margin: 0;
        }
        #flip {
            -webkit-animation: wrapper 6s ease-in-out infinite;
            animation: wrapper 6s ease-in-out infinite;
            height: 350px;
            width: 253px;
            position: absolute;
            left: 50%;
            top: 30%;
            -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;
            transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform-origin: 0 0 0;
            transform-origin: 0 0 0;
        }
@-webkit-keyframes wrapper {
            50% {
                -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
                transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
            }
        }
@keyframes wrapper {
            50% {
                -webkit-transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
                transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
            }
        }
        #flip div {
            height: 350px;
            width: 24px;
            position: absolute;
            left: calc(100% - 1px);
            -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            background-size: 253px 350px;
        }
        #flip #front,
        #flip #front div {
            background-image: url(http://blogs.slj.com/afuse8production/files/2012/06/Hobbit1.jpg);
            box-shadow: inset rgba(255,255,255,0.3) 0px -1px 0 0,#35582C 0px 1px 0px 0px;
        }
        #flip #front > div > div > div > div > div > div > div > div > div > div.........完整代码请登录后点击上方下载按钮下载查看