码迷,mamicode.com
首页 > Web开发 > 详细

CSS3实现3d菜单翻转

时间:2018-01-30 00:19:16      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:ros   overflow   链接   nbsp   示例   out   渲染   鼠标   问答   

技术分享图片

 

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: 0;
            /*设置行高,设置文字距上距下的高,包括文字的高度。这里与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: 0;
            -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菜单翻转

标签:ros   overflow   链接   nbsp   示例   out   渲染   鼠标   问答   

原文地址:https://www.cnblogs.com/xiaobaizhiqian/p/8379666.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!