css实现有按键反馈的三维游戏手柄效果代码-html代码-BFW代码库

代码语言：html
所属分类：三维
代码描述：css实现有按键反馈的三维游戏手柄效果代码，点击右上角的方格显示不同视角的手柄效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        @import url('https://fonts.googleapis.com/css2?family=Teko&display=swap');
        
        body {
          --angle: 35deg;
          margin: 0;
          height: 100vh;
          perspective: 1500px;
          overflow: hidden;
          font-family: Teko, Helvetica, Arial, sans-serif;
          font-size: 3vmin;
        }
        
        *:focus {
          outline: 0.25vmin dashed red;
          outline-offset: 0.5vmin;
        }
        
        /* Camera angle */
        input[type="radio"] {
          position: absolute;
          left: -1000in;
        }
        
        #cam1:checked ~ #snes-gamepad { --x: -1; --y: 1; }
        #cam2:checked ~ #snes-gamepad { --x: -1; }
        #cam3:checked ~ #snes-gamepad { --x: -1; --y: -1; }
        #cam4:checked ~ #snes-gamepad { --y: 1; }
        #cam6:checked ~ #snes-gamepad { --y: -1; }
        #cam7:checked ~ #snes-gamepad { --x: 1; --y: 1; }
        #cam8:checked ~ #snes-gamepad { --x: 1; }
        #cam9:checked ~ #snes-gamepad { --x: 1; --y: -1; }
        
        #cam1:checked ~ #camera label:nth-child(1),
        #cam2:checked ~ #camera label:nth-child(2),
        #cam3:checked ~ #camera label:nth-child(3),
        #cam4:checked ~ #camera label:nth-child(4),
        #cam5:checked ~ #camera label:nth-child(5),
        #cam6:checked ~ #camera label:nth-child(6),
        #cam7:checked ~ #camera label:nth-child(7),
        #cam8:checked ~ #camera label:nth-child(8),
        #cam9:checked ~ #camera label:nth-child(9) { 
          background: #f004; 
          mix-blend-mode: color-burn;
        }
        
        #camera {
          --color1: #ccc;
          position: absolute;
          top: 2vmin;
          right: 2vmin;
          width: 10vmin;
          aspect-ratio: 1;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(3, 1fr);
          background:
            linear-gradient(#0000 0 30%, #fff 0 36.66%, #0000 0 63.33%, #fff 0 70%, #0000 0),
            linear-gradient(90deg, #0000 0 30%, #fff 0 36.66%, #0000 0 63.33%, #fff 0 70%, #0000 0),
            radial-gradient(closest-side, #ccc 33.33%, #0000 0 40%, #ccc 0 99.99%, #0000 0)
            
            ;
          border-radius: 50%;
          overflow: hidden;
          gap: 0.125vmin;
        }
        
        /* Gamepad code */
        #snes-gamepad {
          --x: 0;
          --y: 0;
          --pos: 0.2vmin;
          --rotate: rotate3d(var(--x), var(--y), 0, var(--angle));
          --gray-light: #ccc;
          --gray: #b5b5bb;
          --gray-dark: #585a58;
          --purple-light: #bbe;
          --purple-dark: #64b;
          --button-x: #3c62f8; var(--purple-light);
          --button-y: #14b161; var(--purple-light);
          --button-a: #f03025; var(--purple-dark);
          --button-b: #e9dd34; var(--purple-dark);
          position: absolute;
          width: 80vmin;
          height: 34vmin;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%) var(--rotate);
          transform-style: preserve-3d;
          transition: transform 1s;
        }
        
        #snes-gamepad * {
          position: absolute;
          box-sizing: border-box;
          transform-style: preserve-3d;
        }
        
        .is3d > div {
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
        
        .is3d > div:nth-child(1) { transform: translateZ(calc(var(--pos) * 1)); }
        .is3d > div:nth-child(2) { transform: translateZ(calc(var(--pos) * 2)); }
        .is3d > div:nth-child(3) { transform: translateZ(calc(var(--pos) * 3)); }
        .is3d > div:nth-child(4) { transform: translateZ(calc(var(--pos) * 4)); }
        .is3d > div:nth-child(5) { transform: translateZ(calc(var(--pos) * 5)); }
        .is3d > div:nth-child(6) { transform: translateZ(calc(var(--pos) * 6)); }
        .is3d > div:nth-child(7) { transform: translateZ(calc(var(--pos) * 7)); }
        .is3d > div:nth-child(8) { transform: translateZ(calc(var(--pos) * 8)); }
        .is3d > div:nth-child(9) { transform: translateZ(calc(var(--pos) * 9)); }
        .is3d > div:nth-child(10) { transform: translateZ(calc(var(--pos) * 10)); }
        .is3d > div:nth-child(11) { transform: translateZ(calc(var(--pos) * 11)); }
        .is3d > div:nth-child(12) { transform: translateZ(calc(var(--pos) * 12)); }
        
        button {
          border: 0;
          color: transparent;
          background: transparent;
          padding: 0;
          transform-style: preserve-3d;
        }
        
        button.active, /* gamepad controlled */
        button:active {
          --pos: 0.05;
        }
        
        
        /* general frame */
        .face,
        .face div {
          --pos: -0.7vmin;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background:
            /* buttons circle */
            radial-gradient(closest-side, #0000 97%, #fff2 99%, #0000 0) 48vmin 2vmin / 30vmin 30vmin no-repeat,
            radial-gradient(closest-side, var(--gray) 99%, #0002 99.8%, #0000 100%) 48vmin 2vmin / 30vmin 30vmin no-repeat,
            /* axis circle */
            radial-gradient(farthest-side at 100% 50%, #0000 94%, #00000002 99.9%, #0000 0) 7.5vmin 7.5vmin / 9.5vmin 19vmin no-repeat,
            radial-gradient(farthest-side at 1vmin 50%, #0000 96%, #ffffff1f 99.9%, #0000 0) 16vmin 7.5vmin / 10.5vmin 19vmin no-repeat,
            radial-gradient(farthest-side, #0000 80%, #00000004 99.9%, #0000 0) 7.5vmin 7.5vmin / 19vmin 19vmin no-repeat,
            /* general shape */
            radial-gradient(circle at 17vmin 17vmin, var(--gray-light) 16.95vmin, #0000 17vmin),
            radial-gradient(circle at 63vmin 17vmin, var(--gray-light) 16.95vmin, #0000 17vmin),
            linear-gradient(#0000, #fff2 0.01%, #0000 2% 98%, #0001) 50% 0 / 46vmin 30vmin no-repeat,
            linear-gradient(var(--gray-light) 0 0) 50% 0 / 46vmin 30vmin no-repeat;
          pointer-events: none;
        }
        
        .face div {
          filter: contrast(0.9);
          background: 
            radial-gradient(circle at 17vmin 17vmin, var(--gray-light) 16.9vmin, #0000 17vmin),
            radial-gradient(circle at 63vmin 17vmin, var(--gray-light) 16.9vmin, #0000 17vmin),
            linear-gradient(var(--gray-light) 0 0) 50% 0 / 46vmin 30vmin no-repeat;
        }
        
        /* Text (all) */
        h1 {
          top: 3.5vmin;
          left: 45%;
          margin: 0;
          transform: translate(-50%, 0%);
          font-size: 4vmin;
          font-style: italic;
          color: var(--gray-dark);
          font-weight: 300;
        }
        
        h1 + p {
          background: var(--gray-dark);
          color: var(--gray-light);
          margin: 0;
          padding: 0vmin 0.75vmin;
          line-height: 3vmin;
          height: 2.5vmin;
          font-style: italic;
          font-size: 1.66vmin;
          top: 8vmin;
          left: 45.25%;
          transform: translate(-50%, 0);
          letter-spacing: 0.2vmin;
        }
        
        .letter {
          color: var(--gray-light);
          font-style: italic;
          font-size: 3.75vmin;
          transform: skew(3deg);
          line-height: 0;
        }
        
        .letter-a { top: 28%; left: 92.9%; }
        .letter-b { top: 69%; left: 71.25%; }
        .letter-x { top: 11%; left: 83.5%; }
        .letter-y { top: 52%; left: 62%; }
        
        /* Top buttons */
        #l, #r {
          --pos: -0.2vmin;
          width: 17.25vmin;
          height: 5vmin;
          top: -1.5vmin;
          left: 8.75vmin;
          background: 
            linear-gradient(#fff0, #fff6),
            var(--gray-light);
          border-radius: 55% 1vmin 0 0;
          box-shadow: 
            inset 0 0.125vmin 0.25vmin #0002,
            inset 0 2.5vmin 0.5vmin -1vmin var(--gray-light),
            inset 0 3vmin 1vmin -1vmin #0004;
          transform: translateZ(-2.75vmin);
        }
        
        #l div,
        #r div {
          box-shadow: 
            inset 0 0.125vmin 0.25vmin #0002,
            inset 0 2.5vmin 0.5vmin -1vmin var(--gray-light),
            inset 0 3vmin 1vmin -1vmin #0004;
          border-radius: 55% 1vmin 0 0;
        }
        
        #l.active, /* gamepad js */
        #l:active {
          box-shadow: 
            inset 0 0.125vmin 0.25vmin #0002,
            inset 0 2.5vmin 0.75vmin -1.66vmin var(--gray-light),
            inset 0 3vmin 1vmin -1vmin #0004;
          transform: translateZ(-2.75vmin) translateY(1vmin);
        }
        
        #r {
          top: -1.5vmin;
          left: auto;
          right: 8.75vmin;
          transform: scaleX(-1) translateZ(-2.75vmin);
        }
        
        #r.active, /* gamepad js */
        #r:active {
          box-shadow: 
            inset 0 0.125vmin 0.25vmin #0002,
            inset 0 2.5vmin 0.75vmin -1.66vmin var(--gray-light),
            inset 0 3vmin 1vmin -1vmin #0004;
          transform: scaleX(-1)  translateZ(-2.75vmin) translateY(1vmin);
        }
        
        /* axis */
        .axis, .axis div {
          --color: #111;
          background: 
            linear-gradient(#0000 31%, #000c 33.33% 66.66%, #0000 70%),
            linear-gradient(90deg, #0000 31%, #000c 33.33% 66.66%, #0000 70%)
            ;
          width: 13.5vmin;
          aspect-ratio: 1;
          top: 9.75vmin;
          left: 10.5vmin;
          pointer-events: none;
          box-shadow: 
            -4.5vmin 0 0.25vmin -4.4vmin #000c,
            4.5vmin 0 0.25vmin -4.4vmin #000c,
            0 -4.5vmin 0.25vmin -4.4vmin #000c,
            0 4.5vmin 0.25vmin -4.4vmin #000c
        }
        
        .axis div {
          --color: #34393a; #333;
          --shadows: 
            radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 36.66% 0% / 10% 10% no-repeat,
            radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 62.66% 0% / 10% 10% no-repeat,
            radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 36.66% 100% / 10% 10% no-repeat,
            radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 62.66% 100% / 10% 10% no-repeat,
            radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 0 36.66% / 10% 10% no-repeat,
            radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 0 62.66% / 10% 10% no-repeat,
            radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 100% 36.66% / 10% 10% no-repeat,
            radial-gradient(closest-side, var(--color) 93%, #0000 99.9%) 100% 62.66% / 10% 10% no-repeat,
            linear-gradient(var(--color) 0 0) 50% 50% / 100% 26.66% no-repeat,
            linear-gradient(var(--color) 0 0) 50% 50% / 26.66% 100% no-repeat,
            linear-gradient(var(--color) 0 0) 50% 50% / 93.33% 33.33% no-repeat,
            linear-gradient(var(--color) 0 0) 50% 50% / 33.33% 93.33% no-repeat;
          top: 0;
          left: 0;
          box-shadow: none;
          background: 
            var(--shadows)
            ;
        }
        
        .axis div:last-of-type {
          --color: #3a4448;#3a3a3a;
          background:
            linear-gradient(#fff1, #fff0 20% 80%, #fff1),
            linear-gradient(90deg, #fff1, #fff0 20% 80%, #fff1),
            var(--shadows)
            ;
        /*   width: 13.5vmin; */
          box-shadow: 
            inset 0 0 2vmin -0.5vmin #0009,
            inset -4.5vmin -4.5vmin 3vmin #2102,
            inset 4.5vmin 4.5vmin 3vmin #ffff0005
            ;
          clip-path: polygon(33.33% 0, 66.66% 0, 66.66% 33.33%, 100% 33.33%, 100% 66.66%, 66.66% 66.66%, 66.66% 100%, 33.33% 100%, 33.33% 66.66%, 0 66.66%, 0 33.33%, 33.33% 33.33%);
          -webkit-mask: var(--shadows);
          mask: var(--shadows)
        }
        
        .axis div:last-of-type::before {
          content: "";
          position: absolute;
          width: 25%;
          aspect-ratio: 1;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: 
            radial-gradient(#0000, #0002);
          box-shadow:
        /*     inset 1vmin 1vmin 1vmin -0.5vmin #0002, */
            inset -0.25vmin 0 0.5vmin #28282855,
            inset 0 0 1vmin 0.25vmin #28282855,
            inset -1vmin -0.25vmin 0.5vmin -0.25vmin #ffffff11
            ;
          border-radius: 50%;
          opacity: 0.9;
        }
        
        #up, #right, #left, #down {
          width: 4.5vmin;
          height: 4.5vmin;
        }
        
        #up { top: 9.75vmin; left: 15vmin; }
        #left { top: 14.25vmin; left: 10.5vmin; }
        #right { top: 14.25vmin; left: 19.5vmin; }
        #down { top: 18.75vmin; left: 15vmin; }
        
        #up.active ~ .axis div, /* gamepad js */
        #up:active ~ .axis div { 
          transform-origin: 50% 100%;
          transform: translateZ(calc(var(--pos) * var(--z))) rotateX(5deg); 
        }
   .........完整代码请登录后点击上方下载按钮下载查看