css3 作一个相似于翻书特效的3D动画

时间 2019-11-09

标签 css3 css 一个似于翻书特效 3d 动画栏目 CSS 繁體版

原文原文链接

咱们来看下作一个css3 3D动画须要哪些东西。前面咱们已经使用transition和transform作了一些简单的操做。javascript

设置3D场景

作3D动画，咱们首先要设置3D场景。3D场景咱们一般用perspective和perspective-origin两个属性设定。
css

说明各个属性的做用：
perspective:800;表明3D物体距离浏览器是800px。
perspective-origin:50% 50%;眼睛视角的中心点，分别在xy轴的50%的地方。
设置了这两个属性以后，浏览器中的物体已经变成三维物体。这个时候咱们就能够作3D动画了。html

transform 3D操做

transform既能够作3D操做也能够作2D操做，为了区分是3D仍是2D，咱们须要加个样式属性。加了这个样式以后，就表明在动画中咱们要作3D操做。java

-webkit-transform-style:-webkit-preserve-3d;

咱们用图片表示在三维世界里xyz轴的方向（x轴是向右的，y轴是向下的，z轴的方向至关于从屏幕指向咱们的）。

下面咱们作一个向下翻页的数字，和一个向作翻页的数字。css3

作一个向下翻页的动画

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      #my3dspace{
        /* 设置3D场景，距离人眼800像素，原点在50% 50%的位置 */
        -webkit-perspective:800;
        -webkit-perspective-origin:50% 50%;
        overflow: hidden;
      }
      #pagegroup{
        width: 400px;
        height: 400px;
        margin: 0 auto;
        -webkit-transform-style:preserve-3d;
        /* 告诉浏览器里面的元素进行3D转换 */
        position: relative;
      }
      .page{
        position: absolute;
        left: 0;
        top: 0;
        width: 360px;
        height: 360px;
        padding: 20px;
        background: #000;
        color: #fff;
        font-weight: bold;
        font-size: 360px;
        line-height: 360px;
        text-align: center;
      }
      #page1{
        -webkit-transform-origin:bottom;
        -webkit-transition:-webkit-transform 1s linear;
      }
      #page2,#page3,#page4,#page5,#page6{
        -webkit-transform-origin:bottom;
        -webkit-transition:-webkit-transform 1s linear;
        -webkit-transform:rotateX(90deg);
      }
      #op{
        text-align: center;
        margin: 40px auto;
      }
    </style>
    <script>
      var curIndex=1;//当前变量的值
      function next(){
        if(curIndex===6){
          return;
        }
        var curPage=document.getElementById("page"+curIndex);
        curPage.style.webkitTransform="rotateX(-90deg)";
        curIndex++;
        var nextPage=document.getElementById("page"+curIndex);
        nextPage.style.webkitTransform="rotateX(0deg)";
      }
      function prev(){
        if(curIndex===1){
          return;
        }
        var curPage=document.getElementById("page"+curIndex);
        curPage.style.webkitTransform="rotateX(90deg)";
        curIndex--;
        var prevPage=document.getElementById("page"+curIndex);
        prevPage.style.webkitTransform="rotateX(0deg)";
      }
    </script>
  </head>
  <body>
    <div id="my3dspace">
      <div id="pagegroup">
        <div class="page" id="page1">1</div>
        <div class="page" id="page2">2</div>
        <div class="page" id="page3">3</div>
        <div class="page" id="page4">4</div>
        <div class="page" id="page5">5</div>
        <div class="page" id="page6">6</div>
      </div>
    </div>
    <div id="op">
      <a href="javascript:next()">next</a>
      <a href="javascript:prev()">previous</a>
    </div>
  </body>
</html>

作一个向左翻页的动画——相似于翻书的特效

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <style>
      #my3dspace{
        /* 设置3D场景，距离人眼800像素，原点在50% 50%的位置 */
        -webkit-perspective:800;
        -webkit-perspective-origin:50% 50%;
        width: 360px;
        overflow: hidden;
        margin: auto;
      }
      #pagegroup{
        width: 360px;
        height: 360px;
        margin: 0 auto;
        -webkit-transform-style:preserve-3d;
        /* 告诉浏览器里面的元素进行3D转换 */
        position: relative;
      }
      .page{
        position: absolute;
        left: 0;
        top: 0;
        width: 360px;
        height: 360px;
        background: #000;
        color: #fff;
        font-weight: bold;
        font-size: 360px;
        line-height: 360px;
        text-align: center;
      }
      #page1{
        -webkit-transform-origin:left;
        -webkit-transition:-webkit-transform 1s linear;
      }
      #page2,#page3,#page4,#page5,#page6{
        -webkit-transform-origin:left;
        -webkit-transition:-webkit-transform 1s linear;
        -webkit-transform:rotateY(90deg);
      }
      #op{
        text-align: center;
        margin: 40px auto;
      }
    </style>
    <script>
      var curIndex=1;//当前变量的值
      function next(){
        if(curIndex===6){
          return;
        }
        var curPage=document.getElementById("page"+curIndex);
        curPage.style.webkitTransform="rotateY(-90deg)";
        curIndex++;
        var nextPage=document.getElementById("page"+curIndex);
        nextPage.style.webkitTransform="rotateY(0deg)";
      }
      function prev(){
        if(curIndex===1){
          return;
        }
        var curPage=document.getElementById("page"+curIndex);
        curPage.style.webkitTransform="rotateY(90deg)";
        curIndex--;
        var prevPage=document.getElementById("page"+curIndex);
        prevPage.style.webkitTransform="rotateY(0deg)";
      }
    </script>
  </head>
  <body>
    <div id="my3dspace">
      <div id="pagegroup">
        <div class="page" id="page1">1</div>
        <div class="page" id="page2">2</div>
        <div class="page" id="page3">3</div>
        <div class="page" id="page4">4</div>
        <div class="page" id="page5">5</div>
        <div class="page" id="page6">6</div>
      </div>
    </div>
    <div id="op">
      <a href="javascript:next()">next</a>
      <a href="javascript:prev()">previous</a>
    </div>
  </body>
</html>