纯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 wrapp.........完整代码请登录后点击上方下载按钮下载查看