3D-Kopfhörer

Im Editor öffnen Veröffentlichen Sie Ihren Code

HTML

CSS

body {
            margin: 0;
            padding: 0;
            height: 100vh;
            background: black;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        /*container contendo tudo e girando horizontalmente */
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            transform-style: preserve-3d;
            transform: rotateY(0deg);
            animation: rotateH 10s linear infinite;
        }
        @keyframes rotateH{
            0%{transform:rotateY(0deg)}
            100%{transform:rotateY(360deg)}
        }
        /*2 cilindros iguais, um branco e um preto da cor do body por cima para fazer um arco */
        .cylinder {
            position: relative;
            width: 200px;
            height: 10px;
            transform-style: preserve-3d;
            transform: rotateX(90deg);
        }
        
        .cylinder2{
           position: relative;
           bottom:0;
           width: 200px;
           height: 10px;
           transform-style: preserve-3d;
           transform: rotateX(90deg);
        }
        /*cilindro para fazer os fones */
        .cylinderNano{
           position: absolute;
           width: 30px;
           height: 1.5px;
           transform-style: preserve-3d;
           transform: rotateZ(90deg)  translateZ(45px);
        }
        /*cilindros com segmentos */
        .cylinder-top {
            position: absolute;
            width: 200px;
            height: 200px;
            background: #ffffff;
            border-radius: 50%;
            top: -100px;
            left: 0;
            transform: rotateX(90deg);
            border: 1px solid rgb(255, 255, 255);
        }
        .cylinder2-top{
            border: 1px solid rgb(0, 0, 0);
            background: black;
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            top: -100px;
            left: 0;
            transform: rotateX(90deg);
        }
        .cylinder-nano-top{
            border: 1px solid rgb(255, 255, 255);
            background: rgb(255, 255, 255);
            position: absolute;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            top: -30px;
            left: 0;
            transform: rotateX(90deg);
        }

.cylinder-bottom {
            position: absolute;
            width: 200px;
            height: 200px;
            background: #ffffff;
            border-radius: 50%;
            bottom: -100px;
            left: 0;
            transform: rotateX(-90deg);
            border: 1px solid rgb(255, 255, 255);
        }
        .cylinder2-bottom{
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid rgb(0, 0, 0);
            background: black;
            border-radius: 50%;
            bottom: -100px;
            left: 0;
            transform: rotateX(-90deg);
        }

.cylinder-nano-segment{
            position: absolute;
            width: 2.5px;
            height: 30px;
            left: 55.5px;
            top: 0;
            transform-origin: 6px 150px;
            background: #ffffff;
            border:2px solid rgb(255, 255, 255);
        }
        .cylinder-segment {
            position: absolute;
            width: 12px;
            height: 92px;
            left: 94px;
            top: 1px;
            transform-origin: 6px 150px;
            background: #ffffff;
            border:3px solid rgb(255, 255, 255);
        }
        .cylinder2-segment{
            position: absolute;
            width: 12px;
            height: 92px;
            left: 94px;
            top: 1px;
            transform-origin: 6px 150px;
            background: #000000;
            border:3px solid rgb(0, 0, 0);
        }
        /*ANEIS para os ouvidos e maior controle */
        .left-ring{
            position: absolute;
            left: -15px;
            top: -60px;
            transform-style: preserve-3d;
        }
        .right-ring{
            position: absolute;
            right: -20px;
            top: -60px;
            transform-style: preserve-3d;
        }
  
        /*apagando a parte inferior do circulo branco pois o preto nao cobre ela */
        .cylinder-segment:nth-child(15){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(16){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(17){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(18){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(19){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(20){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(21){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(22){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(23){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(24){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(25){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(26){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(27){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(28){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(29){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(30){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(31){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(32){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(33){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(34){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(35){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(36){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(37){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(38){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(39){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(40){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(41){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(42){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(43){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(44){background:black;border:solid 3px black;}
        .cylinder-segment:nth-child(45){background:black;border:solid 3px black;}
        /*cada cilindro possui 60 segmentos, cada um com 6deg de diferenca ate fazer 360 e translateZ para deixar 3d com transform style 3d */
        .cylinder-segment:nth-child(1), .cylinder2-segment:nth-child(1) {
            transform: rotateY(0deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(2), .cylinder2-segment:nth-child(2) {
            transform: rotateY(6deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(3), .cylinder2-segment:nth-child(3) {
            transform: rotateY(12deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(4), .cylinder2-segment:nth-child(4) {
            transform: rotateY(18deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(5), .cylinder2-segment:nth-child(5) {
            transform: rotateY(24deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(6), .cylinder2-segment:nth-child(6) {
            transform: rotateY(30deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(7), .cylinder2-segment:nth-child(7) {
            transform: rotateY(36deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(8), .cylinder2-segment:nth-child(8) {
            transform: rotateY(42deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(9), .cylinder2-segment:nth-child(9) {
            transform: rotateY(48deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(10), .cylinder2-segment:nth-child(10) {
            transform: rotateY(54deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(11), .cylinder2-segment:nth-child(11) {
            transform: rotateY(60deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(12), .cylinder2-segment:nth-child(12) {
            transform: rotateY(66deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(13), .cylinder2-segment:nth-child(13) {
            transform: rotateY(72deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(14), .cylinder2-segment:nth-child(14) {
            transform: rotateY(78deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(15), .cylinder2-segment:nth-child(15) {
            transform: rotateY(84deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(16), .cylinder2-segment:nth-child(16) {
            transform: rotateY(90deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(17), .cylinder2-segment:nth-child(17) {
            transform: rotateY(96deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(18), .cylinder2-segment:nth-child(18) {
            transform: rotateY(102deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(19), .cylinder2-segment:nth-child(19) {
            transform: rotateY(108deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(20), .cylinder2-segment:nth-child(20) {
            transform: rotateY(114deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(21), .cylinder2-segment:nth-child(21) {
            transform: rotateY(120deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(22), .cylinder2-segment:nth-child(22) {
            transform: rotateY(126deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(23), .cylinder2-segment:nth-child(23) {
            transform: rotateY(132deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(24), .cylinder2-segment:nth-child(24) {
            transform: rotateY(138deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(25), .cylinder2-segment:nth-child(25) {
            transform: rotateY(144deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(26), .cylinder2-segment:nth-child(26) {
            transform: rotateY(150deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(27), .cylinder2-segment:nth-child(27) {
            transform: rotateY(156deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(28), .cylinder2-segment:nth-child(28) {
            transform: rotateY(162deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(29), .cylinder2-segment:nth-child(29) {
            transform: rotateY(168deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(30), .cylinder2-segment:nth-child(30) {
            transform: rotateY(174deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(31), .cylinder2-segment:nth-child(31) {
            transform: rotateY(180deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(32), .cylinder2-segment:nth-child(32) {
            transform: rotateY(186deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(33), .cylinder2-segment:nth-child(33) {
            transform: rotateY(192deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(34), .cylinder2-segment:nth-child(34) {
            transform: rotateY(198deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(35), .cylinder2-segment:nth-child(35) {
            transform: rotateY(204deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(36), .cylinder2-segment:nth-child(36) {
            transform: rotateY(210deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(37), .cylinder2-segment:nth-child(37) {
            transform: rotateY(216deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(38), .cylinder2-segment:nth-child(38) {
            transform: rotateY(222deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(39), .cylinder2-segment:nth-child(39) {
            transform: rotateY(228deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(40), .cylinder2-segment:nth-child(40) {
            transform: rotateY(234deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(41), .cylinder2-segment:nth-child(41) {
            transform: rotateY(240deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(42), .cylinder2-segment:nth-child(42) {
            transform: rotateY(246deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(43), .cylinder2-segment:nth-child(43) {
            transform: rotateY(252deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(44), .cylinder2-segment:nth-child(44) {
            transform: rotateY(258deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(45), .cylinder2-segment:nth-child(45) {
            transform: rotateY(264deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(46), .cylinder2-segment:nth-child(46) {
            transform: rotateY(270deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(47), .cylinder2-segment:nth-child(47) {
            transform: rotateY(276deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(48), .cylinder2-segment:nth-child(48) {
            transform: rotateY(282deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(49), .cylinder2-segment:nth-child(49) {
            transform: rotateY(288deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(50), .cylinder2-segment:nth-child(50) {
            transform: rotateY(294deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(51), .cylinder2-segment:nth-child(51) {
            transform: rotateY(300deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(52), .cylinder2-segment:nth-child(52) {
            transform: rotateY(306deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(53), .cylinder2-segment:nth-child(53) {
            transform: rotateY(312deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(54), .cylinder2-segment:nth-child(54) {
            transform: rotateY(318deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(55), .cylinder2-segment:nth-child(55) {
            transform: rotateY(324deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(56), .cylinder2-segment:nth-child(56) {
            transform: rotateY(330deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(57), .cylinder2-segment:nth-child(57) {
            transform: rotateY(336deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(58), .cylinder2-segment:nth-child(58) {
            transform: rotateY(342deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(59), .cylinder2-segment:nth-child(59) {
            transform: rotateY(348deg) translateZ(100px);
        }
        .cylinder-segment:nth-child(60), .cylinder2-segment:nth-child(60) {
            transform: rotateY(354deg) translateZ(100px);
        }

.cylinder-nano-segment:nth-child(1) {
            transform: rotateY(0deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(2) {
            transform: rotateY(6deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(3) {
            transform: rotateY(12deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(4) {
            transform: rotateY(18deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(5) {
            transform: rotateY(24deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(6) {
            transform: rotateY(30deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(7) {
            transform: rotateY(36deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(8) {
            transform: rotateY(42deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(9) {
            transform: rotateY(48deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(10) {
            transform: rotateY(54deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(11) {
            transform: rotateY(60deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(12) {
            transform: rotateY(66deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(13) {
            transform: rotateY(72deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(14) {
            transform: rotateY(78deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(15) {
            transform: rotateY(84deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(16) {
            transform: rotateY(90deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(17) {
            transform: rotateY(96deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(18) {
            transform: rotateY(102deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(19) {
            transform: rotateY(108deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(20) {
            transform: rotateY(114deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(21) {
            transform: rotateY(120deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(22) {
            transform: rotateY(126deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(23) {
            transform: rotateY(132deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(24) {
            transform: rotateY(138deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(25) {
            transform: rotateY(144deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(26) {
            transform: rotateY(150deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(27) {
            transform: rotateY(156deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(28) {
            transform: rotateY(162deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(29) {
            transform: rotateY(168deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(30) {
            transform: rotateY(174deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(31) {
            transform: rotateY(180deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(32) {
            transform: rotateY(186deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(33) {
            transform: rotateY(192deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(34) {
            transform: rotateY(198deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(35) {
            transform: rotateY(204deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(36) {
            transform: rotateY(210deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(37) {
            transform: rotateY(216deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(38) {
            transform: rotateY(222deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(39) {
            transform: rotateY(228deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(40) {
            transform: rotateY(234deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(41) {
            transform: rotateY(240deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(42) {
            transform: rotateY(246deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(43) {
            transform: rotateY(252deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(44) {
            transform: rotateY(258deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(45) {
            transform: rotateY(264deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(46) {
            transform: rotateY(270deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(47) {
            transform: rotateY(276deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(48) {
            transform: rotateY(282deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(49) {
            transform: rotateY(288deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(50) {
            transform: rotateY(294deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(51) {
            transform: rotateY(300deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(52) {
            transform: rotateY(306deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(53) {
            transform: rotateY(312deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(54) {
            transform: rotateY(318deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(55) {
            transform: rotateY(324deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(56) {
            transform: rotateY(330deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(57) {
            transform: rotateY(336deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(58) {
            transform: rotateY(342deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(59) {
            transform: rotateY(348deg) translateZ(60px);
        }
        .cylinder-nano-segment:nth-child(60) {
            transform: rotateY(354deg) translateZ(60px);
        }

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS