CSS-3D动画和NAV-TAB切换HTML

NAV标题切换目录

块级元素：

在网页中以块的形式显示，默认情况都会占据一行，两个相邻的块级元素不会出现并列显示的元素，按照顺序自上而下排列。

行内元素：

在网页中始终以行内逐个显示，没有自己的形状并且不能定义自己的宽和高，他显示的宽和高根据所包含内容的宽和高确定。

内联元素也会遵循盒模模型基本法则，如定义padding，border，margin，background等属性，但是个别属性不能正确显示。

可变元素：

根据上下文确定该元素是块元素还是内联元素

CSS的3D动画

在2d的基础上添加 z 轴的变化 3D 位移：

　　在2d的基础上添加 translateZ（），或者使用translate3d（）

　　translateZ（）：以方框中心为原点，变大 3D 缩放：在2d的基础上添加 scaleZ（），或者使用scale3d（）

　　scaleZ（）和 scale3d（）函数单独使用时没有任何效果 3D 透视：perspective 规定3D元素的透视效果

　　可以取值为none或不设置，这种情况下说明没有透视效果

　　取值越小，3d效果越明显

3D背面可见：backface-visibility 定义元素在不面对屏幕时是否可见

　　transform-style：规定被嵌套元素在3D空间中显示

　　transform-style：flat；子元素将不保留其 3d位置

　　transform-style：preserve-3d；子元素将保留其3d位置

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。

　　css中通过 @keyframes规则是创建动画，可以改变任意多的样式任意多的次数。

　　当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。

指定至少这两个CSS3的动画属性绑定向一个选择器：

　　规定动画的名称

　　规定动画的时长

　　语法：@keyframes

　　styleName {

　　　　keyframes-selector{css-style;}

　　}

keyframes-selector：可以用百分比来规定变化发生的时间

　　也可以用关键词 "from" 和 "to"

　　0% 是动画的开始，100% 是动画的完成

效果图

废话不都说，具体代码如下：

html 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>nav和3D效果图</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .nav {
      height: 60px;
      min-width: 960px;
      background: #2196f3;
    }

    .nav ul {
      width: 960px;
      margin: 0 auto;
      text-decoration: none;
      overflow: hidden;
    }

    .nav ul li {
      float: left;
      border-right: 1px #fff solid;
    }

    .nav ul li a {
      display: block;
      width: 119px;
      height: 60px;
      color: #fff;
      text-align: center;
      line-height: 60px;
      text-decoration: none;
      font-size: 18px;
    }

    .nav ul li a:hover {
      background: #0011ff;
    }

    .nav ul li.active {
      background: #ff9800;
      font-weight: bold;
    }

    .nav ul li:last-child {
      border-right: none;
    }
  </style>

  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 500px;
      height: 500px;
      margin: 0 auto;
      position: relative;
      perspective: 800px;
      cursor: pointer;
    }

    .box ul {
      list-style: none;
      width: 200px;
      height: 200px;
      transition: all 2s;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      transform-style: preserve-3d;
    }

    .box ul li {
      width: 200px;
      height: 200px;
      text-align: center;
      line-height: 200px;
      position: absolute;
      font-size: 36px;
      color: #fff;
    }

    .box ul li:nth-child(1) {
      background: rgba(30, 255, 0, 0.5);
      transform: translateY(-100px) rotateX(90deg);
    }

    .box ul li:nth-child(2) {
      background: rgba(255, 188, 45, 0.5);
      transform: translateY(100px) rotateX(-90deg);
    }

    .box ul li:nth-child(3) {
      background: rgba(68, 233, 255, 0.5);
      transform: translateX(-100px) rotateY(-90deg);
    }

    .box ul li:nth-child(4) {
      background: rgba(255, 61, 61, 0.5);
      transform: translateX(100px) rotateY(90deg);
    }

    .box ul li:nth-child(5) {
      background: rgba(126, 12, 255, 0.5);
      transform: translateZ(100px);
    }

    .box ul li:nth-child(6) {
      background: rgba(170, 19, 120, 0.5);
      transform: translateZ(-100px) rotateY(180deg);
    }

    .box ul:hover {
      transform: rotateX(360deg) rotateY(360deg);
    }
  </style>
</head>

<body>
  <div class="nav">
    <ul type="none" id="nav">
      <li class="active"><a href="#">博客首页</a></li>
      <li><a href="#">随手笔记</a></li>
      <li><a href="#">版本管理</a></li>
      <li><a href="#">用户反馈</a></li>
      <li><a href="#">门店管理</a></li>
      <li><a href="#">购物评价</a></li>
      <li><a href="#">后台管理</a></li>
    </ul>
  </div>

  <div class="box">
    <ul>
      <li>上</li>
      <li>下</li>
      <li>左</li>
      <li>右</li>
      <li>前</li>
      <li>后</li>
    </ul>
  </div>

  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  <script>
    $(function () {
      var $coupon_tab = $("#nav>li");
      var index = 0;
      $coupon_tab.click(function () {
        // 移除tab中class的active属性
        $($coupon_tab[index]).removeClass('active');
        index = $(this).index();
        // 添加tab中class的active属性
        $(this).addClass('active');
      });
    });
  </script>
</body>

</html>