鼠标移动到导航栏上实现底面翻转成正面的实现组件

最新推荐文章于 2022-02-23 13:47:35 发布

sword_chiu

最新推荐文章于 2022-02-23 13:47:35 发布

阅读量229

点赞数

分类专栏：代码方法收藏代码练习基础知识文章标签： css3

本文链接：https://blog.csdn.net/sword_chiu/article/details/106551910

版权

基础知识同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

代码方法收藏

11 篇文章 0 订阅

订阅专栏

代码练习

11 篇文章 0 订阅

订阅专栏

鼠标移动前效果
在这里插入图片描述
鼠标移动后效果

实现代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    /* 首先需要一个大盒子，因为是绕着大盒子转动的，里面两个a标签重叠 */
    /* 其次在背面的a标签需要往x轴移动-90度。这样就形成一个立体的十字效果 */
    /* 然后需要把倒过来的90度a标签往下推  那么侧过来就是倒过来的T*/
    /* 最后需要把正面的a沿z轴往外推，因为其翻转的坐标是整个大盒子的中心点，否则会导致翻转后位置错乱 */
    * {
        margin: 0;
        padding: 0;
    }

    .box {
        /* 反转效果透视环境建立在a的父盒子也就是box上 */
        transform-style: preserve-3d;
        transition: all .6s;
        position: relative;
        width: 100%;
        height: 100%;
    }

    ul {
        width: 800px;
        height: 300px;
        margin: 100px auto;
    }

    li {
        float: left;
        list-style: none;
        width: 100px;
        height: 40px;
        /* 因为透视效果要给父盒子。而旋转整个box盒子的父盒子是li。注意，不能写在body标签上 */
        perspective: 500px;
    }


    a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 40px;
        color: #fff;
    }

    li a:nth-child(1) {
        background-color: purple;
        z-index: 1;
        /* 这里注意一定要把正面的a往外推，否则坐标轴会乱，不能达到效果 */
        transform: translateZ(20px);
    }

    li a:nth-child(2) {
        background-color: pink;
        /* 必须先写移动 再写其他 */
        transform: translateY(20px) rotateX(-90deg);
    }

    .box:hover {
        transform: rotateX(90deg);
    }
</style>

<body>
    <ul>
        <li>
            <div class="box">
                <a href="#">正面</a><a href="#">背面</a>
            </div>
        </li>
    </ul>
</body>

</html>

sword_chiu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标移动到导航栏上实现底面翻转成正面的实现组件

鼠标移动前效果鼠标移动后效果实现代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><style> /* 首先需要一个大盒子，因为是绕着大盒子转动的，里面两个a标签重叠 */ /* 其次在背面的a标签需要往x轴移动-90度。这样就形成一个立体的十字效.
复制链接

扫一扫

专栏目录