今天来个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. iOS Start developing ios apps (OC) pdf

    这是苹果官方最后一次更新的基于OC的iOS开发基础教程, 如果英文的看不懂,还有中文的版本哦. 点击下面的链接 好东西,分享给大家! 如果确实有帮到你,麻烦star一下我的github吧!

  2. 常用CSS缩写语法总结

    使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如:#000000可以缩写为#000;#336699可以缩 ...

  3. HDU4787 GRE Words Revenge（AC自动机 分块 合并）

    题目 Source http://acm.hdu.edu.cn/showproblem.php?pid=4787 Description Now Coach Pang is preparing for ...

  4. $(function(){}) 与(function(){})()在执行时的优先级

    $(function(){}) 是在页面DOM元素加载完成后执行,这时页面中的DOM对象都可以找到; (function(){})()是匿名函数,按页面从上到下顺序,执行到它时才执行,这时可能有的在此 ...

  5. 简单C#、asp.net mvc验证码的实现

    using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Text;u ...

  6. TreeSet

    一.TreeSet中的元素比较有两种方式 1.定义一个类,实现Comparable接口  复写的是comparato方法 2.定义一个类,实现Comparator接口,覆盖compara方法(此种方法 ...

  7. iOS8沙盒路径的变化

    iOS8中的的沙盒路径发生了变化 之前是这样的路径,通过NSHomedictionary()获取的家路径 /Users/wupeng/Library/Application Support/iPhon ...

  8. Java_equals和“==”的区别

    1. 对于基本数据类型 它们的比较,应该用“==”,比较的是他们的值. 2. 引用数据类型 “==”判断的是对象是否为同一个,也就是它们内存中的存放地址是否一样,一样,则返回true,否则返回fals ...

  9. ps 实例部分

    实例篇1:将不同图片通过阀值转换成黑白色人物头像 图像-黑白-曲向-阀值 本图像-复制-粘贴

  10. ie8 jquery parents() 获取多个的问题

    今天开发的时候碰到了一个奇怪的问题 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3 ...