zoukankan      html  css  js  c++  java
  • 初步学习css3之3D动画

     本人是一名前端菜鸟,在css3如此火爆的时代,今天才来接触这个神秘的东西,第一次接触到的就是使用css3制作3d动画,特来写此文章,高手勿喷。

     以下是body部分

     <body>
      <div id="my3d">
        <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>&nbsp;<a href="javascript:prev()">prev</a>
    </div>
    </body>

    以下是css部分

    #my3d{

    -webkit-perspective:800;
    -webkit-perspective-origin:50% 50%;
    overflow:hidden;

    }
    #pagegroup{

    400px;

    height:400px;

    margin:0px auto;

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

    position:relative;

    }
    .page{

    360px;

    height:360px;

    padding:20px;

    font-size:360px;

    line-height:360px;

    font-weight:bold;

    text-align:center;

    position:absolute;

    color:#fff;

    background-color:black;

    }
    #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;

    }

    以下是js部分

    <script type="text/javascript">
    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 curpage2=document.getElementById("page"+curIndex);
      curpage2.style.webkitTransform="rotateX(90deg)" ;
      curIndex--;
      var nextPage2=document.getElementById("page"+curIndex);
      nextPage2.style.webkitTransform="rotateX(0deg)";
    }
    </script>

    通过以上代码便可以实现点击next键时,由动画的1到6一直3d翻转,点击prev时,便可以实现向前翻转,当然使用类似的方法也可以实现向翻书一样的翻转和像翻日历那样的翻转,就是向左翻转和向上翻转,当然本代码还有个不尽完美的地方,就是没办法实现循环翻转,因为要急着交作业,这只能等后期再开发研究

               

       

  • 相关阅读:
    SCI写作经典替换词,瞬间高大上!(转)
    最佳化常用测试函数 Optimization Test functions
    算法复杂度速查表
    VS 代码行统计
    CPLEX IDE 菜单栏语言设置( 中文 英文 韩文 等多国语言 设置)
    如何从PDF文件中提取矢量图
    Matlab无法打开M文件的错误( Undefined function or method 'uiopen' for input arguments of type 'char)
    visual studio 资源视图 空白 解决方案
    MFC DialogBar 按钮灰色不响应
    嗨翻C语言笔记(二)
  • 原文地址:https://www.cnblogs.com/jtxn/p/4840089.html
Copyright © 2011-2022 走看看