zoukankan      html  css  js  c++  java
  • 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: 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>
  • 相关阅读:
    630. Course Schedule III
    20151:补足程序1
    5w5:第五周程序填空题1
    621. Task Scheduler
    452. Minimum Number of Arrows to Burst Balloons
    435. Non-overlapping Intervals
    402. Remove K Digits
    406. Queue Reconstruction by Height
    376. Wiggle Subsequence
    122. Best Time to Buy and Sell Stock II
  • 原文地址:https://www.cnblogs.com/xiaobaizhiqian/p/8379666.html
Copyright © 2011-2022 走看看