十天精通CSS3-制作3D旋转导航总结

前言

《十天精通CSS3》是一个特别好的教程，然而制作3D旋转导航这一个却不是一个很合适的实践，陌生的属性太多，刚刚学的2d变形和动画的知识又都没有用到。不过有源码，有答案，效果又这么酷炫，还是硬着头皮去啃下答案吧。这里是一些总结，初学css3，菜鸟一个，还忘大神们多多指正。

任务

1. 通过CSS3的@font-face属性引入本地字体

@font-face{font-family:name;src:<url>;sRules;}

2. 调用自定义的字体

    font-family: "sansationregular";

3. 设置3D舞台布景

.three-d {
  -webkit-perspective: 200px;/* Safari 和 Chrome */
  -moz-perspective: 200px;
  -o-perspective: 200px;
  perspective: 200px;
}

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。

注释：perspective 属性只影响 3D 转换元素。

这个属性相当于摄影中的景深，也可以理解为舞台的深度，长度小于50＊根号2时会导致变形不流畅。

4. 给3D舞台布景设置过渡动画效果

.three-d {
  -webkit-transition: all 5s ease .3s;
  -moz-transition: all 5s ease .3s;
  transition: all 5s ease .3s;
  position: relative;
}

设置3D过渡动画效果与设置2D过渡动画效果方法一样。

5. 给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果

.three-d:not(.active):hover .three-d-box, 
.three-d:not(.active):focus .three-d-box {
  -wekbit-transform: translateZ(-25px) rotateX(90deg);
  transform: translateZ(-25px) rotateX(90deg);
}

three-d-box中的元素相当于立体的盒子，在该元素没有鼠标悬浮或聚焦的时候three-d-box位于2d元素后面，为立方体的中心点应该为元素z轴长度的一半，z轴长度与高度相等，即-25px;

使用rotateX(90deg)：3d-box元素相对x轴顺时针（向内）旋转90度。

6. 给3D舞台中“.three-d-box”设置过渡与变形效果

.three-d-box {
    transition: all .5s ease-in;
    -webkit-transition: all .5s ease-in;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  -ms-pointer-events: none;
  -o-pointer-events: none;
  pointer-events: none;
  position: absolute;
  top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
}

• transform-style: preserve-3d;:使被转换的子元素保留其 3D 转换，即使其子元素有3d转换的效果。这个属性为flat时表示其子元素为2d转换。
• 3d-box作为一个整体进行变形。

7. 给导航设置3D前面，与3D后面的变形效果

.front {
    transform: rotatex(0deg) translatez(25px);
 }

.back {
    transform: rotatex(-90deg) translatez(25px);/*translatez：向内为负，向外为正*/
  color: #FFE7C4;
}

• front：为前面的面
• back：为下面的面
• z坐标：要实现3d效果，初始时，立方体的中心点位于视图平面，则，z坐标为立方体厚度（等于高度）的一半为25px；
• x轴方向的旋转：在元素没有被选中的时候，back元素位于立方体的底面，所以应在视图平面的基础上旋转90度。由于变形被触发后是顺时针90度，那么这里给一个-90的旋转。（这里正负的设置会影响到字体的方向）。front元素位于视图平面没有旋转。

8. 设置导航当前状态与悬浮状态下的背景效果

.nav-menu li .active .front,
.nav-menu li .active .back,
.nav-menu li a:hover .front,
.nav-menu li a:hover .back {
    background-color: #51938f;
    -webkit-background-size: 5px 5px;
    background-size: 5px 5px;
    background-position: 0 0, 30px 30px;
    background-image: 
    linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), 
    linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
}

9. 显示下拉导航菜单，并其设置一个变形效果

.nav-menu ul {
  position: absolute;
    text-align: left;
    line-height: 40px;
    font-size: 14px;
    width: 200px;
    -webkit-transition: all 3s ease-in;
    -moz-transition: all 0.3s ease-in;
  -ms-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 3s ease-in;
  -webkit-transform-origin: 0px 0px;
  -moz-transform-origin: 0px 0px;
  -ms-transform-origin: 0px 0px;
  -o-transform-origin: 0px 0px;
  transform-origin: 0px 0px;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
.nav-menu > li:hover ul {
    -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
  display: block;
 }

涉及到变形要明确元素的初始样式，触发变形的事件与元素变形后的样式。

• 初始样式ul元素被沿着x轴逆时针旋转了90度，当一个元素的父元素没有设置transform-style: preserve-3d;并且这个元素被旋转90度后，在视图平面是不可见的，也就起到了隐藏子ul列表的效果；transform-origin设置了变形的中心位置。
• 当鼠标悬停在目标元素上后，下拉列表展示在视图平面，沿着x轴方向没有旋转，故transform: rotateX(0deg);
• 触发时的动画效果：要显示其下拉列表，沿着x轴将下拉列表从-90度的位置旋转到0度实现向外翻转的效果。