借助transform:rotate实现上图的3D导航效果

具体代码如下

  1. 1 <div class="nav">
  2. 2 <ul>
  3. 3 <li>
  4. 4 <a href="#">首页</a>
  5. 5 <a href="#">index</a>
  6. 6 </li>
  7. 7 <li><a href="#">新闻</a>
  8. 8 <a href="#">news</a>
  9. 9 </li>
  10. 10 <li><a href="#">产品</a>
  11. 11 <a href="#">product</a>
  12. 12 </li>
  13. 13 <li><a href="#">关于</a>
  14. 14 <a href="#">about</a>
  15. 15 </li>
  16. 16 </ul>
  17. 17 </div>
  1. 1 <style>
  2. 2 .nav {
  3. 3 margin: 200px auto;
  4. 4 width: 600px;
  5. 5
  6. 6 }
  7. 7
  8. 8 ul {
  9. 9 list-style: none;
  10. 10 }
  11. 11
  12. 12 .nav li {
  13. 13 float: left;
  14. 14 position: relative;
  15. 15 width: 100px;
  16. 16 height: 50px;
  17. 17 line-height: 50px;
  18. 18 /* 需要在父元素设置transform-style:preserve-3d 以实现子元素的3d效果 */
  19. 19 transform-style: preserve-3d;
  20. 20
  21. 21 transition: all .5s;
  22. 22 }
  23. 23
  24. 24 .nav li a {
  25. 25 position: absolute;
  26. 26 top: 0;
  27. 27 left: 0;
  28. 28 width: 100%;
  29. 29 height: 100%;
  30. 30 text-align: center;
  31. 31 text-decoration: none;
  32. 32 color: #fff;
  33. 33 }
  34. 34
  35. 35 .nav li a:first-child {
  36. 36 transform: translateZ(25px);
  37. 37 background-color: green;
  38. 38 }
  39. 39
  40. 40 .nav li a:last-child {
  41. 41 /* 此时橙色盒子躺平之后,需要俯视才能看到橙色盒子,看它的方向始终是Z轴方向,所以这里要向Z轴移动,相当于旋转的时候它的三个轴也会跟着旋转 */
  42. 42 transform: rotateX(90deg) translateZ(25px);
  43. 43 background-color: orange;
  44. 44 }
  45. 45
  46. 46 .nav li:hover {
  47. 47 transform: rotateX(-90deg);
  48. 48 }
  49. 49 </style>

rotate旋转的时候遵循左手法则:轻握左手,大拇指指向旋转轴正方向,四指指向的方向就是旋转方向。屏幕到眼睛方向为rotate的Z轴正方向,水平为X,垂直是Y,如下图所示

CSS3-3D导航(transform:rotate)的更多相关文章

  1. css3 3d展示中rotate()介绍与简单实现

    最近在了解css3的3d动画效果,学习发现,css3中的3d效果实现还是很好玩的,现在我给你大家简单的介绍一下css3中3d效果的实现. 我也只是一个初学者,如果在博客中写的不对的地方欢迎指正. 好了 ...

  2. [应用][js+css3]3D盒子导航[PC端]

    CSS3构建的3D盒子之导航应用 1.在用css3构建的盒子表面,放上iframe,来加载导航页面. 2.鼠标左键按下移动可旋转盒子,寻找想要的网址. 3.左键单机盒子表面,将全屏现实所点盒子表面的网 ...

  3. CSS3 transform rotate(旋转)锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  4. 好吧,CSS3 3D transform变换,不过如此!

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  5. CSS3 3D Transform

    CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换, ...

  6. 基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

    基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠 ...

  7. 好吧,CSS3 3D transform变换,不过如此!——张鑫旭

    一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...

  8. CSS3 transform rotate(旋转)锯齿/元素抖动模糊的解决办法

    使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...

  9. css3中做3D导航栏

    看别人做的一个3D导航栏,觉得很厉害,这里先保存下来,后面有时间好好分析一下: <!doctype html> <html lang="en"> <h ...

  10. HTML5之CSS3 3D transform 剖析式学习之一

    最近坐地铁发现“亚洲动物基金”在地铁上做了很多公益广告,比较吸引人的是一个月熊的广告.做的很可爱.回去就搜了一下,发现这个网站是HTML5做的,非常炫. 所以想学习一下,方法就是传统的学习办法,模仿. ...

随机推荐

  1. SSLCipherCheck_v1.4.2

    Usage: sslciphercheck.exe -h <Host> -p <Port> -u <URL> -c <CSV File> -i < ...

  2. git如何把本地文件夹和远程仓库关联

    场景: 1,有一个本地项目,没有上传到git过,你在远程新建了一个仓库,想把这个本地的代码推送到该仓库 2,直接想把本地代码推送到远程并创建该本地文件对应的仓库(这种情况不可以实现) 解决方法: 本地 ...

  3. #pragma directive

    #pragma package(smart_init) #pragma package(smart_init)确保已打包的单元按照其依赖关系确定的顺序进行初始化(默认情况下包含在package(包)源 ...

  4. Delphi中Stringlist的自定义排序(将函数地址做为参数)

    近日,在编制一个程序过程,因为数据量较小,就使用了stringlist来暂存数据.在使用过程中,遇到了一个问题.Stringlist字符串列表的默认排序方法是按ASCII码的方式进行排序,如3,10, ...

  5. 夸克开发板 FaceDetectOnTft.py 测试

    ① 连接usb 摄像头,执行 dmesg | grep -i video 查看设备识别情况 同时可看到 frame buffer 显示设备(自带的 tft LCD)名称 ② 摄像头识别的设备名为, / ...

  6. Delphi 新语法:For in语句

    据说Delphi 2005开始支持For in语句.并没有深入调查,依然从万一博客学习并整理. 一.遍历 TStrings var List: TStrings; s: string; begin L ...

  7. SOAMANAGER 500 ERROR

    .调查原因是 SICF的服务有一个被开启了,取消激活就能解决这个问题. 可能的原因是在激活fiori的时候会自动激活

  8. Vue2 element-ui组件二封-表单组件-效果展示

    vue2已经落后了? 不着急, vue3的也在写的过程中, 只是发出来vue2的一些组件 系列说明: > 编写原因 vue2在很多人眼里已经快过时了, 而我一直想写一些总结, 但是从两年前到现在 ...

  9. uniapp-时间组件

    可以选择年月日时分秒 示例文件 my-datetime.zip 文档:https://ext.dcloud.net.cn/plugin?id=5603

  10. JSP图书管理系统

    allbook.jsp pageEncoding="UTF-8"%> <%@ page import = "java.util.*" %> & ...