CSS3/HTML5—3D

因为后面需要用到3D部分的知识，下面对这部分知识学习并做相应的记录。
1.Transition(主要从一个属性值过渡到另一个属性值):
（1）属性：
-perspective;perspective-orign
-transform:translate,rotate，origin（旋转中心，如果要设置三个轴上面的旋转中心，对于X轴：left、center、right;对于y轴：top、center、bottom;对于z轴：length px）
？？？有个小小的疑问，对于当设置origin：50% 50% 或者center center的时候，x y轴上两点是重叠在一起了吗?也就是原点？
！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
有一点需要注意的是：rotate()，括号里的角度是相对于初始位置旋转的角度，而不是上一位置的角度哟。
（2）调用方法（如果需要兼容，注意区分火狐或chrome等浏览器）：transition:<过渡属性名称> <过渡时间>
（3）transition五种过渡模式：
linear:匀速
ease:缓慢开始缓慢结束
ease-in：缓慢开始结束变快
ease-out：开始变快结束变慢
ease-in-out：缓慢开始缓慢结束，差距不大

2.animation(主要通过关键帧技术，在网页上达到复杂的动态效果)

3.练习
（1）慕课网上学习时，题目要求制作一个3d卡片切换，实现时还是遇到了很多的bug，我也小小记录一下，便于日后复习。
先写好html文件：

<html>
<head>
  <title>3D练习</title>
  <meta charset="utf-8">
  <style type="text/css">
  /*这里写CSS*/
  </style>
  <script>
  /*这里写js*/
  </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>&nbsp;<a href="javascript:prev()">previous</a>  
  </div>
  </body>
</html>

接着需要为6个卡片设置对应的样式，第一张直接显示在当前界面（平行于屏幕），其余2-6五张卡片垂直于屏幕（趴着）。因此可以设置围绕X轴旋转90度或者0度，此处的旋转角度一直是相对于初始位置，而非上一个位置。

<style>
   #my3dspace{
      -webkit-perspective:800;
      -webkit-perspective-origin:50% 50%;
      overflow:hidden;/*为了不让这部分影响其他部分的显示*/
     }
     #pagegroup{
        width:400px;
        height:400px;
        margin:0 auto;
        -webkit-transform-style:preserve-3d;
        position: relative; /*可能6个会重叠在一起*/
     }
     .page{
        width: 360px;
        height: 360px;
        padding: 20px;
        background-color: black;
        color: white;
        font-weight: bold;
        font-size:360px;
        line-height:360px;
        text-align: center;
        position: absolute;/*用于后面页面重叠时*/
     }
     #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>

翻转效果的实现要借助js函数实现（x/y/z三个方向的正方向分别为：向）：向右/向下/垂直屏幕向外

 <script>
      var curIndex = 1;
      function next(){
        var curPage = document.getElementById('page'+curIndex);
        if(curIndex == "6")
        {
           return;
        }
        curPage.style.webkitTransform = "rotateX(-90deg)";
        curIndex++;
        var nextPage = document.getElementById('page'+curIndex);
        nextPage.style.webkitTransform = "rotateX(0deg)";        
      };
      function prev(){
        var curPage = document.getElementById('page'+curIndex);
        if(curIndex != "1")
        {
           curPage.style.webkitTransform = "rotateX(90deg)";
           curIndex--;
           var prevPage = document.getElementById('page'+curIndex);
           prevPage.style.webkitTransform = "rotateX(0deg)";
        }
         else{
          return;
        }
      }
    </script>

最后的效果图截图如图所示：
这里写图片描述

猜你喜欢