今天来个3D旋转菜单，是纯css3实现的，主要用到transform,transition,backface-visibility。

主要是transform这个变换，它是今天猪脚。

transform里有transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。

transform-origin 属性允许您改变被转换元素的位置。

backface-visibility 属性定义当元素不面向屏幕时是否可见。

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    .nav{margin:0;

        padding:50px;}

.nav li{float:left;

    list-style:none;

    padding:0 15px;

    -webkit-perspective:100px;}

.nav a{float:left;

    position:relative;

    font:14px/20px "宋体";

    text-decoration:none;

    -webkit-transform-style:preserve-3d;

    transition:.5s;

    -webkit-transform-origin:center center -10px;}

    .nav a:hover{

        -webkit-transform:rotateX(-90deg);}

.nav span{float:left;

    width:60px;

    text-align:center;

    -webkit-backface-visibility:hidden;}

.nav span:nth-of-type(2){

    position:absolute;

    left:0;

    top:-20px;

    -webkit-transform-origin:bottom;

    -webkit-transform:rotateX(90deg);}

    </style>

</head>

<body>

    <ul class="nav">

        <a href="#">

            <span>选项一</span>

            <span>选项1</span>

        </a>

        <a href="#">

            <span>选项二</span>

            <span>选项2</span>

        </a>

        <a href="#">

            <span>选项三</span>

            <span>选项3</span>

        </a>

        <a href="#">

            <span>选项四</span>

            <span>选项4</span>

        </a>

    </ul>

</body>

</html>

3D旋转菜单的更多相关文章

  1. CSS3 3D旋转下拉菜单--兼容性不太好

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. 【译】仿Taasky的3D翻转菜单动画实现

    最终效果 最终效果 开始 首先下载并打开一个事先搭好架子的Demo,然后来分析一下.这个Demo包含一个主页和详情页,其中MenuViewController继承自UITableViewControl ...

  3. CSS3特效----制作3D旋转导航

    大致思路:首先给 three-d-box 设置一个 transition是不可少的 然后每个 a 标签里面有两个 span 一个叫 font 一个叫 back,默认状态下 font 旋转0度,也就是没 ...

  4. 纯css3响应式3d翻转菜单

    前端开发whqet,csdn,王海庆,whqet,前端开发专家 周末快乐哈,今天来看一个纯CSS3实现的3d翻转菜单.3d响应式菜单,希望对大家有所帮助. 在线赞赏效果.在线编辑代码,或者下载收藏. ...

  5. css3立体旋转菜单

    css3立体旋转菜单,css3,3D,立体旋转,立体菜单,菜单导航,css3立体旋转菜单是一款纯css3实现的三维立体旋转导航菜单. 源码下载页:http://www.huiyi8.com/sc/71 ...

  6. 如何创建一个非常酷的3D效果菜单

    http://www.cocoachina.com/ios/20150603/11992.html 原文地址在这里.原文 去年,读者们投票选出了Top5的iOS7最佳动画,当然也很想看到有关这些动画如 ...

  7. 【CSS3进阶】酷炫的3D旋转透视

    之前学习 react+webpack ,偶然路过 webpack 官网 ,看到顶部的 LOGO ,就很感兴趣. 最近觉得自己 CSS3 过于薄弱,想着深入学习一番,遂以这个 LOGO 为切入口,好好研 ...

  8. 低调奢华 CSS3 transform-style 3D旋转

    点击这里查看效果:http://keleyi.com/a/bjad/s89uo4t1.htm 效果图: CSS3 transform-style 属性 以下是代码: <!DOCTYPE html ...

  9. CSS3——3D旋转图（跑马灯效果图）

    CSS3新增了很多新的属性,可以用很少的代码实现炫酷的动画效果,但由于兼容性各浏览器的能力存在不足,有特别需求的网站就呵呵啦.H5C3已是大势所趋了,之前看过一个新闻,Chrome将在年底全面转向H5 ...

随机推荐

  1. solr schema.xml文档节点配置

    首先,讲解一下/usr/local/solr/collection1/conf/schema.xml的配置,此文档功能类似于配置索引数据库. Field:类似于数据库字段的属性(此文统一使用用“字段” ...

  2. linpe包-让发送和接收数据分析更快和更容易

    1.简介 通常在R中从来进行分析和展现的数据都是以基本的格式保存的,如.csv或者.Rdata,然后使用.Rmd文件来进行分析的呈现.通过这个方式,分析师不仅可以呈现他们的统计分析的结果,还可以直接生 ...

  3. 前端性能优化--为什么DOM操作慢？

    作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩(css.js.图片皆可压缩) 样式表放头部 ...

  4. bash 源码分析

    下载解压 bash-3.2 编译bash export LFS=/my/soft/mylfs tar xvf $LFS/sources/bash-3.2.tar.gz -C $LFS/sources/ ...

  5. xcode8 升级后注释快键键不能使用的解决方法

    1.这个是因为苹果解决xcode ghost.把插件屏蔽了.解决方法 命令运行:  sudo /usr/libexec/xpccachectl 然后必须重启电脑后生效 2.option+command ...

  6. 在iPhone上同时关闭语音控制和siri的方法

    分享 步骤及要点:1.在设置里打开siri.语音控制就自动关闭了.2.在siri里的"仅语言拨号"语言项里选择"土耳其文"或者"阿拉伯文". ...

  7. C#程序员开发WinForm必须知道的 Window 消息大全

    不要以为下面的东西只有C++中才会用到哦! 消息,就是指Windows发出的一个通知,告诉应用程序某个事情发生了.例如,单击鼠标.改变窗口尺寸.按下键盘上的一个键都会使Windows发送一个消息给应用 ...

  8. asp.net mvc引用控制台应用程序exe

    起因:有一个控制台应用程序和一个web程序,web程序想使用exe程序的方法,这个时候就需要引用exe程序. 报错:使用web程序,引用exe程序 ,vs调试没有问题,但是部署到iis就报错,如下: ...

  9. 《JavaScript高级程序设计（第3版）》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  10. Flume_常见的几个问题

    在HDFS的文件默认生成文件大小1K,如何设置文件大小和数量 拷贝一份flume-conf.properties.template改名为hive-mem-size.properties hive-me ...