CSS3实现3d菜单翻转

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菜单翻转

最新文章

热门文章