查看: 372|回复: 0

[DIV/CSS] 十天精通CSS3-制作3D旋转导航总结

发表于 2018-2-13 08:00:02
前言

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

任务 1. 通过CSS3的@font-face属性引入本地字体
  1. @font-face{font-family:name;src:<url>;sRules;}
复制代码
2. 调用自定义的字体
  1. font-family: "sansationregular";
复制代码
3. 设置3D舞台布景
  1. .three-d {
  2. -webkit-perspective: 200px;/* Safari 和 Chrome */
  3. -moz-perspective: 200px;
  4. -o-perspective: 200px;
  5. perspective: 200px;
  6. }
复制代码

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

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

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

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

4. 给3D舞台布景设置过渡动画效果
  1. .three-d {
  2. -webkit-transition: all 5s ease .3s;
  3. -moz-transition: all 5s ease .3s;
  4. transition: all 5s ease .3s;
  5. position: relative;
  6. }
复制代码

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

5. 给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果
  1. .three-d:not(.active):hover .three-d-box,
  2. .three-d:not(.active):focus .three-d-box {
  3. -wekbit-transform: translateZ(-25px) rotateX(90deg);
  4. transform: translateZ(-25px) rotateX(90deg);
  5. }
复制代码

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

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

6. 给3D舞台中“.three-d-box”设置过渡与变形效果
  1. .three-d-box {
  2. transition: all .5s ease-in;
  3. -webkit-transition: all .5s ease-in;
  4. -webkit-transform-style: preserve-3d;
  5. -moz-transform-style: preserve-3d;
  6. -ms-transform-style: preserve-3d;
  7. -o-transform-style: preserve-3d;
  8. transform-style: preserve-3d;
  9. -webkit-pointer-events: none;
  10. -moz-pointer-events: none;
  11. -ms-pointer-events: none;
  12. -o-pointer-events: none;
  13. pointer-events: none;
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. display: block;
  18. width: 100%;
  19. height: 100%;
  20. }
复制代码
transform-style: preserve-3d;:使被转换的子元素保留其 3D 转换,即使其子元素有3d转换的效果。这个属性为flat时表示其子元素为2d转换。 3d-box作为一个整体进行变形。 7. 给导航设置3D前面,与3D后面的变形效果
  1. .front {
  2. transform: rotatex(0deg) translatez(25px);
  3. }
  4. .back {
  5. transform: rotatex(-90deg) translatez(25px);/*translatez:向内为负,向外为正*/
  6. color: #FFE7C4;
  7. }
复制代码
front:为前面的面 back:为下面的面 z坐标:要实现3d效果,初始时,立方体的中心点位于视图平面,则,z坐标为立方体厚度(等于高度)的一半为25px; x轴方向的旋转:在元素没有被选中的时候,back元素位于立方体的底面,所以应在视图平面的基础上旋转90度。由于变形被触发后是顺时针90度,那么这里给一个-90的旋转。(这里正负的设置会影响到字体的方向)。front元素位于视图平面没有旋转。 8. 设置导航当前状态与悬浮状态下的背景效果
  1. .nav-menu li .active .front,
  2. .nav-menu li .active .back,
  3. .nav-menu li a:hover .front,
  4. .nav-menu li a:hover .back {
  5. background-color: #51938f;
  6. -webkit-background-size: 5px 5px;
  7. background-size: 5px 5px;
  8. background-position: 0 0, 30px 30px;
  9. background-image:
  10. linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480),
  11. linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
  12. }
复制代码
9. 显示下拉导航菜单,并其设置一个变形效果
  1. .nav-menu ul {
  2. position: absolute;
  3. text-align: left;
  4. line-height: 40px;
  5. font-size: 14px;
  6. width: 200px;
  7. -webkit-transition: all 3s ease-in;
  8. -moz-transition: all 0.3s ease-in;
  9. -ms-transition: all 0.3s ease-in;
  10. -o-transition: all 0.3s ease-in;
  11. transition: all 3s ease-in;
  12. -webkit-transform-origin: 0px 0px;
  13. -moz-transform-origin: 0px 0px;
  14. -ms-transform-origin: 0px 0px;
  15. -o-transform-origin: 0px 0px;
  16. transform-origin: 0px 0px;
  17. -webkit-transform: rotateX(-90deg);
  18. -moz-transform: rotateX(-90deg);
  19. -ms-transform: rotateX(-90deg);
  20. -o-transform: rotateX(-90deg);
  21. transform: rotateX(-90deg);
  22. -webkit-backface-visibility: hidden;
  23. -moz-backface-visibility: hidden;
  24. -ms-backface-visibility: hidden;
  25. -o-backface-visibility: hidden;
  26. backface-visibility: hidden;
  27. }
  28. /*任务九、显示下拉导航菜单,并其设置一个变形效果*/
  29. .nav-menu > li:hover ul {
  30. -webkit-transform: rotateX(0deg);
  31. -moz-transform: rotateX(0deg);
  32. -ms-transform: rotateX(0deg);
  33. -o-transform: rotateX(0deg);
  34. transform: rotateX(0deg);
  35. display: block;
  36. }
复制代码

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

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


回复

使用道具 举报