css3 做一个类似于翻书特效的3D动画

头像
666888
    阅读 6 分钟
    1

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

    设置3D场景

    做3D动画，我们首先要设置3D场景。3D场景我们通常用perspective和perspective-origin两个属性设定。
    图片描述

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

    transform 3D操作

    transform既可以做3D操作也可以做2D操作，为了区分是3D还是2D，我们需要加个样式属性。加了这个样式之后，就代表在动画中我们要做3D操作。

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

    我们用图片表示在三维世界里xyz轴的方向（x轴是向右的，y轴是向下的，z轴的方向相当于从屏幕指向我们的）。
    图片描述
    下面我们做一个向下翻页的数字，和一个向做翻页的数字。

    做一个向下翻页的动画

    图片描述

    <!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>
    css
    666888
    334 声望10 粉丝

    知其然且知其所以然。

    « 上一篇
    html5 figure和figcaption
    下一篇 »
    css3 新特性

    引用和评论

    推荐阅读
    头像
    数组元素根据中文排序

    666888阅读 938

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.6k

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 2.3k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 11阅读 1.5k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 1k

    头像
    CSS炫酷光晕按钮特效

    南城FE赞 3阅读 1k

    0 条评论
    得票最新