CSS3之翻转导航栏

最新推荐文章于 2022-11-29 17:26:28 发布

njit_peiyuan

最新推荐文章于 2022-11-29 17:26:28 发布

阅读量894

点赞数

原文链接：http://www.cnblogs.com/zlinger/p/9569789.html

版权

一、效果图

二、源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3之翻转导航栏</title>
    <style>
        *{margin: 0; padding: 0;}
        *::before, *::after {
            box-sizing: border-box;
        }
        body {
            text-align: center;
        }
        nav {
            display: inline-block;
            margin-top: 100px;
        }
        nav a {
            display: inline-block;
            color: #fff;
            text-decoration: none;
            perspective: 200px;
        }
        nav a span {
            display: inline-block;
            line-height: 40px;
            width: 100px;
            background-color: #67d2fe;
            paddin: 0 25px;
            position: relative;
            transition: all 1s;
            transform-origin: top;
            transform-style: preserve-3d;
        }
        nav a span::after {
            position: absolute;
            background-color: #d7affe;
            content: attr(data-hover);  /* attribute 自定义属性 的值*/
            width: 100%;
            height: 100%;
            top: 100%;
            left: 0;
            transform: rotateX(-90deg);  /* 往下翻转  是 负值 */
            transform-origin: top;
        }
        nav a:hover span {
            transform: rotateX(90deg) translateY(-20px); /*往上翻转是正值 第二个是向上移动20px*/
        }
    </style>
</head>
<body>
<nav>
    <a href="#">
        <span data-hover="商品详情">导航栏</span>
    </a>
    <a href="#">
        <span data-hover="商品详情">导航栏</span>
    </a>
    <a href="#">
        <span data-hover="商品详情">导航栏</span>
    </a>
    <a href="#">
        <span data-hover="商品详情">导航栏</span>
    </a>
    <a href="#">
        <span data-hover="商品详情">导航栏</span>
    </a>
    <a href="#">
        <span data-hover="商品详情">导航栏</span>
    </a>
    <a href="#">
        <span data-hover="商品详情">导航栏</span>
    </a>
    <a href="#">
        <span data-hover="商品详情">导航栏</span>
    </a>
</nav>
</body>
</html>

转载于:https://www.cnblogs.com/zlinger/p/9569789.html

njit_peiyuan

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS3之翻转导航栏

一、效果图二、源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3之翻转导航栏</title> <style> *{margin: 0; padding: 0;} ...
复制链接

扫一扫