纯CSS3制作按钮3D翻转效果

3D按钮翻转

具体效果
在这里插入图片描述

那么我们开始制作3D按钮翻转效果
我们先把html的结构写一下

<body>
    <ul>
        <li>
            <div class="zheng">首页</div>
        </li>
        <li>
            <div class="zheng">登录</div>
        </li>
        <li>
            <div class="zheng">注册</div>
        </li>
        <li>
            <div class="zheng">关于</div>
        </li>
    </ul>
</body>

正面显现出来的按钮我们有了，那么在我们鼠标移动到上面的时候出现的下面的按钮，使用after伪元素制作。
先把基本的东西写好，

*{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        :root,body{
            width: 100%;
            height: 100%;
        }
        body{
            background-color: #C6B2FF;
        }

用：root让根标签和body铺满整个屏幕
然后我们给ul设置一下属性。。如下
使用calc（）让元素正好处于屏幕中间，
使用perspective给我们的父元素设置一个视距（给3D转换留出空间）
perspective-origin设置视角，center center是默认的！

 ul{
            width: 400px;
            height: 60px;
            position: relative;
            top:calc(50% - 30px);
            left: calc(50% - 200px);
            color: black;
            perspective: 5000px;
            perspective-origin: center center;
        }

设置完ul后我们给后面的li 和 div设置一下属性
transform-style: preserve-3d;
这个属性是制定子元素在三维空间显示的。preserve-3d指定的子元素3d形式显示；
**transform: translateZ(30px);**向z轴移30px；

  ul li{
            transform-style: preserve-3d;
            width: 100px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            float: left;
            font-weight: blod;
            font-size: 1em;
            /* background-color: white; */
             transform: translateZ(30px);
             transition:all 1s;
        }
        ul li div{
            width: 100px;
            height: 59px;
            transform: translateZ(30px);
            background-color: white;
        }

做完前面的部分，我们来做用于翻转的下面
transform:rotateX(-90deg)translateZ(-30px) 让新建的元素在下面
：：after在元素之后添加

  li::after{
            width: 100px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            font-weight: blod;
            font-size: 1em;
            display: block;
            background-color: #C6B2FF ;
            color: white;   transform:rotateX(-90deg)translateZ(-30px) ;
        }
        li:nth-child(1)::after{
            content: "首页";
        }
        li:nth-child(2)::after{
            content: "登录"; 
        }
        li:nth-child(3)::after{
            content: "注册";
        }
        li:nth-child(4)::after{
            content: "关于";
        }
        li:hover{
            /* transition:all 1s; */
            transform: rotateX(90deg);
        }

最后给li添加一个hover伪类就好了。

原文链接：https://blog.csdn.net/qq_44771388/article/details/111996645