• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    CSS3 制作的书本翻页特效

    实现效果:

    实现代码:

    html

    <!-- Please heart it if you like! -->
    <div id='book'>
      <div id='top'></div>
      <div id='front'></div>
      <div id='right'></div>
      <div id='bottom'></div>
      <div id='shadow'></div>
      <div id='bookmark'>
        <div>
          <div>
            <div>
              <div></div>
            </div>
          </div>
        </div>
      </div>
      <div id='bookmark-shadow'></div>
    </div>
    <div id='flip'>
      <div id='front'>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div>
                        <div>
                          <div></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id='back'>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div>
                    <div>
                      <div>
                        <div>
                          <div></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <h4>CSS 3D Bending Effect - Page Flip</h4>

    CSS3

    /* remember to use - transform-style: preserve-3d; */
    html,body {
      height:100%;
      overflow: hidden;
    }
    body {
      background: radial-gradient(#E4CEA6, #9C8763);
      perspective: 900px;
      margin: 0;
    }
    #flip {
      animation: wrapper 6s ease-in-out infinite;
      height: 350px;
      width: 253px; 
      position: absolute;
      left: 50%;
      top: 30%;
      transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(0deg)!important;
      transform-style: preserve-3d;
      transform-origin: 0 0 0;
    }
    @keyframes wrapper {
      50% {
        transform: translateZ(-10px) rotateX(60deg) rotateZ(29deg) rotateY(-180deg);
      }
    }
    #flip div {
      height: 350px;
      width: 24px;
      position: absolute;
      left: calc(100% - 1px);
      transform-origin: 0 100%;
      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 { 
      box-shadow: inset rgba(255,255,255,0.3) -1px -1px 0 0, #35582C 1px 1px 0px 0px;
    }
    #flip #back { transform: rotateY(.4deg); transform-origin: -100% 0; } /* avoid pages overlap */
    #flip #back,
    #flip #back div {
      background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map1_.jpg); 
    }
    
    #flip > div {  left: 0;  background-position-x: 0; }
    #flip div > div { background-position-x: -23px; animation: page 6s ease-in-out infinite; }
    #flip div > div > div { background-position-x : -46px; } 
    #flip div > div > div > div { background-position-x : -69px; }
    #flip div > div > div > div > div { background-position-x : -92px; }
    #flip div > div > div > div > div > div { background-position-x : -115px; }
    #flip div > div > div > div > div > div > div { background-position-x : -138px; }
    #flip div > div > div > div > div > div > div > div  { background-position-x : -161px; }
    #flip div > div > div > div > div > div > div > div > div { background-position-x : -184px; }
    #flip div > div > div > div > div > div > div > div > div > div { background-position-x : -207px; }
    #flip div > div > div > div > div > div > div > div > div > div > div { background-position-x : -229px; }
    /* the more pieces you have, the smoother the bend is */
    
    @keyframes page {
      15% { transform: rotateY(-10deg); }
      50% { transform: rotateY(-2deg); }
      65% { transform: rotateY(10deg); }
      100% { transform: rotateY(0deg); }
    }
    
    #book {
      width: 248px;
      height: 350px;
      position: absolute;
      left:50%;
      top: 30%;
      transform: translate3d(0px,0px,-10px) rotateX(60deg) rotateZ(29deg);
      transform-style: preserve-3d;
      -webkit-transform-origin: 0 0 0;
    }
    @keyframes book {
      25% {
        box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
      }
      50% {
        box-shadow: inset rgba(0,0,0,.2) 0px 0 50px -140px;
      }
      100% {
        box-shadow: inset rgba(0,0,0,.2) 510px 0 50px -140px;
      }
    }
    #book #top {
      animation: book 6s ease-in-out infinite;
      background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/164210/map2.jpg);
      background-size: 100% 100%;
      background-position: 100%;
      box-shadow: inset rgba(0,0,0,0.2) 510px 0 50px -140px;
      height: 350px;
      width: 248px;
      position: absolute;
      left: 0;
      top: 0;
    }
    #book #bottom {
      background: #E7DED1;
      box-shadow: rgba(83, 53, 13, 0.2) 4px 2px 1px,
                  #35582C 1px 1px 0px 0px;
      height: 350px;
      width: 253px;
      position: absolute;
      transform: translateZ(-40px);
      left: 0;
      top: 0;
    }
    #book #shadow {
      animation: shadow 6s ease-in-out infinite;
      box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
      height: 350px;
      width: 248px;
      position: absolute;
      left: -100%;
      top: 0;
      transform: translateZ(-40px);
    }
    @keyframes shadow {
      20% {
        box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
      }
      50% { 
        box-shadow: inset rgba(83, 53, 13, 0.3) -350px 0 150px -140px;
      }
      60% { 
        box-shadow: inset rgba(83, 53, 13, 0) -200px 0 150px -140px;
      }
    }
    #book #front {
      background: -webkit-linear-gradient(top,#FCF6EA, #D8D1C3);
      background-size: 100% 2px; 
      box-shadow: inset #C2BBA2 3px 0 0px, #35582C -2px 1px 0px 0px;
      height: 40px;
      width: 251px;
        left: -3px;
      position: absolute;
      bottom: -40px;
      transform: rotateX(-90deg);
      transform-origin: 50% 0;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    #book #right {
      background: -webkit-linear-gradient(left,#DDD2BB, #BDB3A0);
      background-size: 2px 100%; 
      box-shadow: inset rgba(0,0,0,0) 0 0 0 20px;
      height: 100%;
      width: 40px;
      position: absolute;
      right: -40px;
      top: 0;
      transform: rotateY(90deg);
      transform-origin: 0 50%;
    }
    
    h4 {
      position: absolute;
      bottom: 20px;
      left: 20px;
      margin: 0;
      font-weight: 200;
      opacity: 1;
    	font-family: sans-serif;
      color: rgba(0,0,0,0.3); 
    }
    
    /* bookmark */
    
    #bookmark {
      position: absolute;
      transform: translate3d(20px,350px,-16px);
      transform-style: preserve-3d;
    }
    #bookmark div {
      background: rgb(151, 88, 88);
      box-shadow: rgb(133,77,77) 1px 0;
      height: 10px;
      width: 20px;
      position: absolute;
      top: 9px;
      transform: rotateX(-14deg);
      transform-origin: 50% 0;
      transform-style: preserve-3d;
    }
    #bookmark > div > div {
      background: linear-gradient(top, rgb(151, 88, 88), rgb(189, 123, 123), rgb(151, 88, 88));
    }
    #bookmark > div > div > div {
      background: linear-gradient(top,rgb(151, 88, 88),rgb(133, 77, 77));
    }
    #bookmark > div > div > div > div {
      background: none;
      border-top: 0px solid transparent;
      border-right: 10px solid rgb(133, 77, 77);
      border-bottom: 10px solid transparent;
      border-left: 10px solid rgb(133, 77, 77);
      height: 0;
      width: 0;
    }
    #bookmark-shadow {
      background: linear-gradient(top,rgba(83, 53, 13, 0.25),rgba(83, 53, 13, 0.11));
      height: 15px;
      width: 20px;
      position: absolute;
      transform: translate3d(12px,350px,-25px) rotateX(-90deg) skewX(20deg);
      transform-origin: 0 0;
    }

    以上就是CSS3 制作的书本翻页特效的详细内容,更多关于CSS3 书本翻页特效的资料请关注脚本之家其它相关文章!

    上一篇:浅谈移动端中的视口(viewport)的具体使用
    下一篇:CSS3 制作的悬停缩放特效
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    CSS3 制作的书本翻页特效 CSS3,制作,的,书本,翻页,