今天来个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. 布局包含Image和Title的UIButton

    UIButton中的titleEdgeInsets和imageEdgeInsets可以管理button中image和title的布局. 如果对其理解不够深入,用纯数字进行布局管理,经过不断的调试,还是 ...

  2. dedecms循环列表样式

    简单用法: {dede:arclist typeid="1" row="} <li class="list[field:global.autoindex/ ...

  3. 0421 & SX2016

    山西省选...这个省...不算强吧...然而就是这么腊鸡题目还是wa得一无是处...怎么办啊怎么办啊...无处拯救青春和未来啊... T1: POI2004原题 BZOJ1524 n<=16.这 ...

  4. [VijosP1764]Dual Matrices 题解

    题目大意: 一个N行M列的二维矩阵,矩阵的每个位置上是一个绝对值不超过1000的整数.你需要找到两个不相交的A*B的连续子矩形,使得这两个矩形包含的元素之和尽量大. 思路: 预处理,n2时间算出每个点 ...

  5. Oracle解锁与加锁（HR用户为例)

    SQL*Plus: Release 9.2.0.4.0 - Production on Tue Jul 14 18:12:38 2009 　　Copyright (c) 1982, 2002, Ora ...

  6. 通读AFN①--从创建manager到数据解析完毕

    流程梳理 今天开始会写几篇关于AFN源码解读的一些Blog,首先要梳理一下AFN的整体结构(主要是讨论2.x版本的Session访问模块): 我们先看看我们最常用的一段代码: AFHTTPSessio ...

  7. STM32之ADC+步骤小技巧（英文）

    神通广大的各位互联网的网友们.大家早上中午晚上好好好.今早起来很准时的收到了两条10086的扣月租的信息.心痛不已.怀着这心情.又开始了STM32的研究.早上做了计算机控制的PID实验,又让我想起了飞 ...

  8. txt文本变成html

    file_name = 'x.txt' f = open(file_name,'r') file_result = 'x.html' str_head = " LINE CI UTIL&qu ...

  9. iOS app上架需要提前准备的东西

    APP icon,要求1024*1024并且不能有圆角效果. 不同屏幕的截图 3.5的,4的,4.7的,5.5的 测试账号,即登录的账号密码(不能删除或更改的) 联系人电话,电子邮件 对项目的描述 关 ...

  10. Skyshop: Image-Based Lighting Tools & Shaders插件调整反射光不明显的模型

    在Skyshop插件中,使用类似不锈钢等材质的模型,实时反光效果非常好,如果是其他反光不明显的模型,如砖头,建筑等,这时候就需要调整模型的Shader的高光贴图了. 如官方例子中的用砖块组成的柱子,反 ...