炫酷3D按钮

一.预览


        该样式有一种3D变换的高级感,大家可以合理利用这些样式到自己的按钮上 

二.代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D按钮</title>
    <style>
        /* 通用样式设置,包括盒模型和基础字体 */
        * {
            box-sizing: border-box;
        }

        body, html {
            height: 100%;
            width: 100%;
            margin: 0;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }

        /* 按钮容器样式,居中显示 */
        .container {
            width: 680px;
            margin: 0 auto;
        }

        /* 基础按钮样式设置 */
        .btn {
            border: none;
            position: relative;
            background: none;
            padding: 28px 90px;
            text-transform: uppercase;
            margin: 30px;
            color: inherit;
            letter-spacing: 2px;
            font-size: 1em;
            outline: none;
            transition: all 0.4s;
            cursor: pointer;
        }

        /* 3D效果实现前的准备,让该伪元素能够被遮挡*/
        .btn::after {
            content: "";
            position: absolute;
            z-index: -1;
            transition: all 0.4s;
        }

        /* 设置3D透视效果 */
        .btn-perspective {
            perspective: 800px;
            display: inline-block;
        }

        /* 基础3D按钮样式 */
        .btn-3d {
            transform-style: preserve-3d;
        }

        /* 第一个按钮的颜色和3D效果设置 */
        .btn-one {
            background-color: #E74C3C;
        }

        .btn-one::after {
            background-color: #621e16; /* 按钮下方的暗色阴影 */
            transform: rotateX(90deg); /* 初始旋转状态 */
        }

        .btn-one:hover {
            transform: rotateX(-45deg); /* 鼠标悬停时的旋转 */
        }

        /* 其他按钮的样式设置遵循相似的模式,改变颜色和旋转轴 */
        
        /* 第二个按钮样式 */
        .btn-two {
            background-color: pink;
        }

        .btn-two::after {
            background-color: rgb(130, 56, 69);
            transform: rotateX(-90deg);
        }

        .btn-two:hover {
            transform: rotateX(45deg);
        }

        /* 第三个按钮样式 */
        .btn-three {
            background-color: aqua;
        }

        .btn-three::after {
            background-color: rgb(26, 131, 131);
            transform: rotateY(-90deg);
        }

        .btn-three:hover {
            transform: rotateY(25deg);
        }

        /* 第四个按钮样式 */
        .btn-four {
            background-color: orange;
        }

        .btn-four::after {
            background-color: rgb(112, 78, 14);
            transform: rotateY(90deg);
        }

        .btn-four:hover {
            transform: rotateY(-25deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 每个按钮都包裹在具有3D透视效果的容器中 -->
        <div class="btn-perspective">
            <button class="btn btn-3d btn-one">财</button>
        </div>

        <div class="btn-perspective">
            <button class="btn btn-3d btn-two">神</button>
        </div>

        <div class="btn-perspective">
            <button class="btn btn-3d btn-three">到</button>
        </div>

        <div class="btn-perspective">
            <button class="btn btn-3d btn-four">了</button>
        </div>
    </div>
</body>
</html>

 三.总结

        这个按钮的亮点就是灵活使用了3D变换的相关知识,比如变换原点,设置景深,3D旋转等,会了其中一个便可以举一反三,期待大家的修改指正。 

相关推荐

  1. Vue3可旋转的3D地球

    2024-02-16 03:54:01       64 阅读
  2. wpf 实现3D按钮

    2024-02-16 03:54:01       52 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-16 03:54:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-16 03:54:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-16 03:54:01       82 阅读
  4. Python语言-面向对象

    2024-02-16 03:54:01       91 阅读

热门阅读

  1. C++11 thread_local

    2024-02-16 03:54:01       55 阅读
  2. 「数据结构」优先级队列

    2024-02-16 03:54:01       56 阅读
  3. 0|1分数规划

    2024-02-16 03:54:01       50 阅读
  4. Pycharm配置运行selenium教程

    2024-02-16 03:54:01       48 阅读
  5. 微服务设计:Spring Cloud 链路追踪概述

    2024-02-16 03:54:01       48 阅读
  6. 代码随想录二刷——二叉树day18

    2024-02-16 03:54:01       60 阅读
  7. 代码随想录算法训练营|day32

    2024-02-16 03:54:01       58 阅读
  8. 2024.02.11

    2024-02-16 03:54:01       50 阅读
  9. 「优选算法刷题」:除自身以外数组的乘积

    2024-02-16 03:54:01       61 阅读
  10. 算法刷题day12

    2024-02-16 03:54:01       58 阅读
  11. MySQL学习Day15——MySQL架构

    2024-02-16 03:54:01       48 阅读