transform-style:flat | preserve-3d；

3d透视属性。针对子元素如何在3d空间相对其父元素渲染，这个属性声明在父元素上，并且他的子元素使用了transform才会有效。有两个属性值，一个是flat平面，这也是默认值；一个是preserve-3d当子元素使用transform时，保留其3d的位置也就是3d透视。本示例3d菜单翻转动画中，使用了transform的3d变形属性，包括旋转和移动。当鼠标移入该菜单，该元素做3d翻转动画；鼠标离开后，还原至初始状态

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS3实现3d菜单翻转</title>

    <style type="text/css">

        .nav{

            width: 980px;

            margin: 50px auto;

            background-color: #fdfdfd;

            border: 1px #cccccc solid;

        }

        .nav:after{

            /*本段css主要是解决header标签中的子元素因为浮动而未将header高度撑起来的问题*/

            clear: both;

            display: block;

            overflow: hidden;

            content: "";

        }

        .nav .item{

            width: 200px;

            height: 100px;

            float: left;

            border-right: 5px #333333 solid;

            /*3d元素距离视图的距离，当元素设置perspective时，它的子元素会获得一个透视的效果，而不是元素的本身

            其实就是z轴的距离，从屏幕到屏幕里面的距离*/

            -webkit-perspective: 4000px;

            -moz-perspective: 4000px;perspective: 4000px;

        }

        .nav .item:last-child{

            border-right: none;

        }

        .nav .item a{

            display: block;

            height: 100px;

            /*去掉超链接默认的下边线*/

            text-decoration: none;

            -webkit-transition: all .5s;

            -moz-transition: all .5s;

            -ms-transition: all .5s;

            -o-transition: all .5s;

            transition: all .5s;

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

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

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

            transform-style: preserve-3d;

        }

        .nav .item a p{

            height: 100px;

            margin:;

            /*设置行高，设置文字距上距下的高，包括文字的高度。这里与height同高，即垂直方向居中*/

            line-height: 100px;

            color: #ffffff;

            text-align: center;

            font-size: 20px;

            font-famiy: "Microsoft Yahei";

            -webkit-border-radius: 2px;

            -moz-border-radius: 2px;

            border-radius: 2px;

            -webkit-transition: all .5s;

            -moz-transition: all .5s;

            -ms-transition: all .5s;

            -o-transition: all .5s;

            transition: all .5s;

        }

        .nav .item a p:first-child{

            background-color: #009900;

            -webkit-transform: translateZ(50px);

            -moz-transform: translateZ(50px);

            -ms-transform: translateZ(50px);

            -o-transform: translateZ(50px);

            transform: translateZ(50px);

        }

        .nav .item a p:last-child{

            background-color: #000099;

            -webkit-transform: translateZ(50px) rotateX(-90deg);

            -moz-transform: translateZ(50px) rotateX(-90deg);

            -ms-transform: translateZ(50px) rotateX(-90deg);

            -o-transform: translateZ(50px) rotateX(-90deg);

            transform: translateZ(50px) rotateX(-90deg);

            margin-top: -50px;

        }

        .nav .item a:hover{

            -webkit-transform: rotateX(90deg);

            -moz-transform: rotateX(90deg);

            -ms-transform: rotateX(90deg);

            -o-transform: rotateX(90deg);

            transform: rotateX(90deg);

        }

        .nav .item a:hover p:last-child{

            margin-top:;

            -webkit-transform: translateZ(0) rotateX(-90deg);

            -moz-transform: translateZ(0) rotateX(-90deg);

            -ms-transform: translateZ(0) rotateX(-90deg);

            -o-transform: translateZ(0) rotateX(-90deg);

            transform: translateZ(0) rotateX(-90deg);

        }

    </style>

</head>

<body>

    <header class="nav">

        <div class="item">

            <a href="#">

                <p>首页</p>

                <p>Home</p>

            </a>

        </div>

        <div class="item">

            <a href="#">

                <p>问答</p>

                <p>Q &amp A</p>

            </a>

        </div>

        <div class="item">

            <a href="#">

                <p>关于我们</p>

                <p>About us</p>

            </a>

        </div>

    </header>

</body>

</html>

CSS3实现3d菜单翻转的更多相关文章

  1. css3实现3D立体翻转效果

    1.在IE下无法显示翻转效果,火狐和谷歌可以 /*样式css*/ .nav-menu li { display: inline; } .nav-menu li a { color: #fff; dis ...

  2. CSS3 3D立方体翻转菜单实现教程

    今天我们来看一个非常有创意的CSS3 3D菜单,这个菜单的菜单项是可以旋转的长方体,鼠标滑过是长方体即可旋转,看看下面的效果图,是不是感觉非常酷,我觉得这个菜单很适合用在咱们开发人员的个人网站上. 当 ...

  3. css3实现酷炫的3D盒子翻转效果

    简介 运用css3先在平面空间组成立方体盒子,再让整个盒子翻转起来,先来张效果图: 步骤 1.先用css将6张图片摆成下图的样子: 下面就是通过css3的3D变换将每个面进行翻转,使之成为一个立体的盒 ...

  4. 一款非常棒的纯CSS3 3D菜单演示及制作教程

    原文:一款非常棒的纯CSS3 3D菜单演示及制作教程 这段时间比较忙,很久没在这里分享一些漂亮的HTML5和CSS3资源了,今天起的早,看到一款很不错的CSS3 3D菜单,觉得非常上眼,就将它分享给大 ...

  5. 基于CSS3飘带状3D菜单 菜单带小图标

    这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形成非常酷的3D视觉效果.这款CSS3飘带状 ...

  6. css3的3D和2D

    css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X ...

  7. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  8. CSS3之3D变换实例详解

    CSS3的3D效果很赞,本文实现简单的两种3D翻转效果.首先看效果和源代码,文末是文绉绉的总结部分^_^ 以下CSS代码为了简洁没有添加前缀,请视情况自行添加(自动化时代推荐使用其他的一些方法,如gu ...

  9. css3实现色子自动翻转效果

    原文:css3实现色子自动翻转效果 css3使我们能够跳出2d空间,实现3维空间的动画效果,这里给出一个自动翻转的3d色子动画效果制作过程. 第一步,首先进行HTML的布局,对于3D效果,布局有一定的 ...

随机推荐

  1. Kubernetes Helm入门指南

    什么是Helm?这可不是暗黑破坏神里装备的名称:头盔,而是Kubernetes的一个包管理工具,用来简化Kubernetes应用的部署和管理.我们Helm和Kubernetes的关系,我们可以理解成y ...

  2. 改写python round()函数，解决四舍五入问题 round(1.365,2)=1.36

    round()函数四舍五入存在一个问题,遇到5不一定进一.如下图所示: print(round(1.365,2)) #1.36 没进一 print('%.2f'%1.365) print(round( ...

  3. 解决svn中“工作副本已经锁定”，或者svn清理失败的解决方法

    刚开始遇到这个问题还以为是没有插网线的原因,客户端和服务器都在我的电脑上,但是更新和提交都执行不了,以为是没有插网线就没把这个小问题放在心上,今早上还是这样,就不得不解决一下了. 更新或者提交前要执行 ...

  4. 牛客练习赛20（ABC）

    A. 礼物 题意: 我从买奥利奥的事情中想出了一个算法题:假设某个店铺有N种不同类型的1元奥利奥和M种不同类型的2元奥利奥,而且余量无限,我的钱有k元,我想把k元都用来买奥利奥,且可以买同类型的奥利奥 ...

  5. 深度优先搜索（深搜）——Deep First Search【例题：迷宫】

           深度优先搜索 基本思想:先选择一种可能情况向前探索,在探索过程中,一点那发现原来的选择是错误的,就退回一步重新选择,继续向前探索,(回溯)反复进行. [例题]迷宫问题           ...

  6. 消息中间件JMS(一)

    1.JMS入门 1.1消息中间件 模块之间的依赖也称之为耦合.而耦合越多,之后的维护工作就越困难.那么如果改善系统模块调用关系.减少模块之间的耦合呢?我们接下来就介绍一种解决方案----消息中间件. ...

  7. 解密Spring加载的Properties文件

    Spring的框架中,org.springframework.beans.factory.config.PropertyPlaceholderConfigurer类可以将.properties(key ...

  8. LeetCode8.字符串转换整数(atoi) JavaScript

    请你来实现一个 atoi 函数,使其能将字符串转换成整数. 首先,该函数会根据需要丢弃无用的开头空格字符,直到寻找到第一个非空格的字符为止. 当我们寻找到的第一个非空字符为正或者负号时,则将该符号与之 ...

  9. React Native 中组件的生命周期（转）

    概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...

  10. UICollectionViewCell的设置间距

    UICollectionViewCell的设置间距 #pragma mark - UICollectionView 大小(宽高,平均一行三个) - (CGSize)collectionView:(UI ...