transform实现3d按钮【2021.12.3】

最新推荐文章于 2024-06-24 10:54:10 发布

轻盈的风

最新推荐文章于 2024-06-24 10:54:10 发布

阅读量183

点赞数

文章标签： 3d css html

本文链接：https://blog.csdn.net/masierty/article/details/121721857

版权

原理：

1.先利用background: transparent; border: none;将按钮原本的样式隐藏了

2.然后将按钮里面的两个span改成block也就是块级元素，并让它两绝对定位

3.对按钮设置视点（简单来说就是人眼看3D元素的距离），对两个span修改一下转换基点transform-origin: 50% 50% -20px;（把它想成3D元素）

4.对第一个span：transform: rotateX(90deg);让两个span成90du夹角

5.对按钮用hover，让第一个span在旋转回0deg，让第二个span旋转-90deg

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        .custom-btn {
            width: 130px;
            height: 40px;
            color: #fff;
            border-radius: 5px;
            padding: 10px 25px;
            font-family: 'Lato', sans-serif;
            font-weight: 500;
            background: transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            display: inline-block;
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
                7px 7px 20px 0px rgba(0, 0, 0, 0.1),
                4px 4px 5px 0px rgba(0, 0, 0, 0.1);
            outline: none;
        }
        .btn-one{
            margin: 80px auto;
            border: none;
            /* 因为设置了背景为透明色所以border设置为none会直接透明 */
            display: block;
            position: relative;
            box-shadow: none;
            line-height: 42px;
            perspective: 230px;
        }
        .btn-one span{
            background: rgb(0, 172, 238);
            background: linear-gradient(0deg, rgba(0, 172, 238, 1) 0%, rgba(2, 126, 251, 1) 100%);
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 130px;
            height: 40px;
            box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
            7px 7px 20px 0px rgba(0, 0, 0, 0.1),
            4px 4px 5px 0px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            margin: 0;
            text-align: center;
            transition: all .3s;
        }
        .btn-one span:nth-child(1){
            box-shadow: -7px -7px 20px 0px #fff9,
            -4px -4px 5px 0px #fff9;
            transform: rotateX(90deg);
            transform-origin: 50% 50% -20px;
            /* 利用视点制造视差 */
        }
        .btn-one span:nth-child(2){
            transform: rotateX(0deg);
            transform-origin: 50% 50% -20px;
        }
        .btn-one:hover span:nth-child(1){
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5);
            transform: rotateX(0deg);
        }
        .btn-one:hover span:nth-child(2){
            box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
            7px 7px 0px 0px rgba(0, 0, 0, 0.1),
            4px 4px 0px 0px rgba(0, 0, 0, 0.1);
            color: transparent;
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <button class="custom-btn btn-one"><span>click!</span><span>fresh</span></button>
</body>

</html>