今天来个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. 未能加载文件或程序集“Microsoft.ReportViewer.WinForms 解决办法

    异常信息: 未能加载文件或程序集“Microsoft.ReportViewer.WinForms, Version=10.0.0.0, Culture=neutral, PublicKeyToken= ...

  2. solr DIH 知识梳理

    solr DIH 知识梳理 web.xml中listener配置 <listener> <listener-class>org.apache.solr.handler.data ...

  3. var a=b=c=1; 和 var a=1, b=2, c=3; 的区别。

    function test(){ var a=b=c=1; var a=1, b=2,c=3; } 1中b\c 为全局变量, a为私量 2中a\b\c为私量

  4. 双向链表、双向循环链表的JS实现

    关于链表简介.单链表.单向循环链表.JS中的使用以及扩充方法:  单链表.循环链表的JS实现 关于四种链表的完整封装: https://github.com/zhuwq585/Data-Structu ...

  5. [NOIP2013]华容道

    1.题面 小 B 最近迷上了华容道,可是他总是要花很长的时间才能完成一次.于是,他想到用编程来完成华容道:给定一种局面,华容道是否根本就无法完成,如果能完成,最少需要多少时间.小 B 玩的华容道与经典 ...

  6. WEB应用的组成结构

  7. 【逆向篇】分析一段简单的ShellCode——从TEB到函数地址获取

    其实分在逆向篇不太合适,因为并没有逆向什么程序. 在http://www.exploit-db.com/exploits/28996/上看到这么一段最简单的ShellCode,其中的技术也是比较常见的 ...

  8. 微软官方提供的免费正版 Windows 8.1/Win10/7/XP/Vista 操作系统虚拟机镜像下载

    https://dev.windows.com/en-us/microsoft-edge/tools/vms/windows/

  9. [转]字符型IP地址转换成数字IP的SQL函数

    使用SQL函数可以实现许多的功能,下面为您介绍的是字符型IP地址转换成数字IP的SQL函数示例,供您参考,希望对您学习SQL函数能够有所帮助.      /**//*--调用示例       sele ...

  10. iOS 面试总结 一

    iOS 开发工程师之面试总结一 好久没有出去面试了,大概一年的时间都很稳定,最近出去面试感觉心里特别慌,没有了当时的勇气了,其实还是感觉自己的准备不是特别的充分,这是主要原因. 这段时间待得太安逸没了 ...