css实现一个逼真三维翻书动画效果代码-html代码-BFW代码库

css实现一个逼真三维翻书动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现一个逼真三维翻书动画效果代码

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

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

<head>

    <meta charset="UTF-8">

    <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(//repo.bfw.wiki/bfwrepo/image/5fb494a881d8d.png);
            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 {
            box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
        }
        #flip #back {
          .........完整代码请登录后点击上方下载按钮下载查看