今天来个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. Linux 用户添加sudo 权限

    编辑/etc/sudoers 搜索root 添加 账号 ALL=(ALL) ALL

  2. 使用CocoaPods过程中 Unable to find a specification for

    文章转自:http://blog.csdn.net/zhangao0086/article/details/39703083 当把CocoaPods生成的workspace移动到上层目录时,需要改下P ...

  3. PHP中关于PDO的使用

    执行没有结果集的查询 执行INSERT,UPDATE,DELETE的时候,不返回结果集.这个时候可以是有exec(),exec()将返回查询所影响的行数 int PDO::exec ( string ...

  4. [BZOJ4199][NOI2015]品酒大会

    #131. [NOI2015]品酒大会 统计 描述 提交 自定义测试 一年一度的“幻影阁夏日品酒大会”隆重开幕了.大会包含品尝和趣味挑战两个环节,分别向优胜者颁发“首席品酒家”和“首席猎手”两个奖项, ...

  5. 基础2.通过Ajax获得servlet数据（最基础）

    案列一:从服务器的得到输出的数据 Jsp界面 <script type="text/javascript" src="test.js"></s ...

  6. React-Native需要css和布局-20160902

    import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, } from 'reac ...

  7. C,C++

    C与C++的Struct有何区别,Java有Struct吗,C++里Struct与Class区别: C++虚析构函数作用: static静态变量初始化: 深复制与浅复制区别: const * int ...

  8. php 搜索（查询）功能

    今天遇到一个问题:在做“搜索”功能时,输入查询条件后查询不了. 我做的是首页显示数据表package中的内容,但是有个条件,显示在首页的内容还必须是 :字段status=0,且printing=0的数 ...

  9. 利用浏览器LocalStorage缓存图片，视频文件

    文章路径:https://hacks.mozilla.org/2012/02/saving-images-and-files-in-localstorage/

  10. CSS列表逆序

    要使列表逆序的话,大多数人包括我一半都会选择在ol标签里使用reversed属性 <ol reversed> <li>first</li> <li>se ...