css实现三维翻转按钮点击效果代码-html代码-BFW代码库

css实现三维翻转按钮点击效果代码

代码语言：html

代码描述：css实现三维翻转按钮点击效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        .menu {
          --front: #275EFE;
          --back: #D93757;
          --icon: white;
          perspective: 600px;
          width: 48px;
          height: 48px;
          position: relative;
          cursor: pointer;
          -webkit-tap-highlight-color: transparent;
        }
        .menu input {
          display: none;
        }
        .menu input + div span {
          --rotateY: 0deg;
          --background: var(--front);
          transform: rotateY(var(--rotateY));
          transform-style: preserve-3d;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: var(--background);
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          transition: transform 0.6s cubic-bezier(0.2, 0.64, 0.48, 1.24);
        }
        .menu input + div span:before, .menu input + div span:after {
          --rotate: 0deg;
          content: "";
          position: absolute;
          width: 16px;
          height: 2px;
          border-radius: 1px;
          top: 50%;
          left: 50%;
          background: var(--icon);
          -webkit-backface-visibility: hidden;
                  backface-visibility: hidden;
          transform: translate(-50%, -50%) rotate(var(--rotate)) translateZ(6px);
        }
        .menu input + div span:first-child {
          --background: var(--back);
       .........完整代码请登录后点击上方下载按钮下载查看