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>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值