qe-01

✨ Orang Utan

<html>
  <head>
    <title> เก้าอี้ </title>
    <style>
      body{
        background:#0018;
        margin:0;
      }
      
      .main{
        transform-style:preserve-3d;
        perspective:700px;
        width:600px;
        height:300px;
        margin:200px;
      }
      
      .nang{
        background: linear-gradient(hsl(30,50%,50%),hsl(30,65%,60%),hsl(30,50%,50%));
        width:300px;
        height:100px;
        position:relative center;
        transform-style:preserve-3d;
        transform: rotatex(60deg) rotatey(0deg) rotatez(0deg);
        animation: cycle 20s infinite linear;
      }
      
      /*ที่นี่ง*/
      .n1{
        background:hsl(30,50%,50%);/*linear*/
        width:300px;
        height:100px;
        transform: translatez(-5px);
      }
      .n2{
        background:hsl(30,60%,70%);/*linear*/
        width:300px;
        height:5px;
        transform:rotatex(90deg) translatez(2px) translatey(-2px);
      }
      .n3{
        background:hsl(30,60%,70%);/*linear*/
        width:300px;
        height:5px;
        transform:rotatex(90deg) translatez(107px) translatey(-2px);
      }
      .n4{
        background:hsl(30,60%,70%);/*linear*/
        width:100px;
        height:5px;
        transform:rotatex(0deg) rotatey(90deg) rotatez(90deg) translatex(-62px) translatez(-50px) translatey(-2px);
      }
    .n5{
        background:hsl(30,60%,70%);/*linear*/
        width:100px;
        height:5px;
        transform:rotatex(0deg) rotatey(90deg) rotatez(90deg) translatex(-68px) translatez(250px) translatey(-2px);
      }
      
      /*ขาเก้าอี้*/
      .leg{
        position:absolute;
        transform-style: preserve-3d;
        top:0;
        left:0;
        width:10px;
        height:100px;
        background:hsl(0,50%,50%);
        /*box-shadow:0px 0px 0px #1108;*/
        /*opacity:.5;*/
      }
      
      /*ขา หน้า ซ้าย*/
      .LLF1{
        width:10;
        height:90;
        background: hsl(30,50%,50%);/*linear*/
        transform:rotatex(90deg) translatez(-55px) translatey(-15px);
      }
      .LLF2{
        width:10;
        height:90;
        background:hsl(30,50%,50%);/*linear*/
        transform:rotatex(90deg) translatez(-45px) translatey(-15px);
      }
      .LLF3{
        width:10;
        height:90;
        background: hsl(30,60%,70%);/*linear*/
        transform:rotatex(90deg) rotatey(90deg) translatex(50px) translatey(-15px) translatez(-5px);
      }
      .LLF4{
        width:10;
        height:90;
        background:hsl(30,60%,70%);/*linear*/
        transform:rotatex(90deg) rotatey(90deg) translatex(50px) translatey(-15px) translatez(5px);
      }
      
       /*ขา หน้า ขวา*/
      .LRF1{
        width:10;
        height:90;
        background: hsl(30,50%,50%);/*linear*/
        transform:rotatex(90deg) translatex(290px)translatez(-45px) translatey(-15px);
      }
      .LRF2{
        width:10;
        height:90;
        background: hsl(30,50%,50%);/*linear*/
        transform:rotatex(90deg) translatex(290px)translatez(-55px) translatey(-15px);
      }
      .LRF3{
        width:10;
        height:90;
        background: hsl(30,60%,70%);/*linear*/
        transform:rotatex(90deg) rotatey(90deg) translatex(50px) translatey(-15px) translatez(285px);
      }
      .LRF4{
        width:10;
        height:90;
        background: hsl(30,60%,70%);/*linear*/
        transform:rotatex(90deg) rotatey(90deg) translatex(50px) translatey(-15px) translatez(295px);
      }
      
      /*ขา หลัง ซ้าย*/
      
      .LRH1{
        width:10;
        height:110;
        background: hsl(30,50%,50%);/*linear*/
        transform:rotatex(90deg) translatex(290px)translatez(55px) translatey(-5px);
      }
      .LRH2{
        width:10;
        height:110;
        background: hsl(30,50%,50%);/*linear*/
        transform:rotatex(90deg) translatex(290px)translatez(44.5px) translatey(-5px);
      }
      .LRH3{
        width:10;
        height:110;
        background: hsl(30,60%,70%);/*linear*/
        transform:rotatex(90deg) rotatey(90deg) translatex(-50px) translatey(-5px) translatez(285px);
      }
      .LRH4{
        width:10;
        height:110;
        background: hsl(30,60%,70%);/*linear*/
        transform:rotatex(90deg) rotatey(90deg) translatex(-50px) translatey(-5px) translatez(295px);
      }
      
      /*ขา หลัง ขวา*/
      .LLH1{
        width:10;
        height:110;
        background: hsl(30,50%,50%);/*linear*/
        transform:rotatex(90deg) translatez(55px) translatey(-5px);
      }
      .LLH2{
        width:10;
        height:110;
        background: hsl(30,50%,50%);/*linear*/
        transform:rotatex(90deg) translatez(45px) translatey(-5px);
      }
      .LLH3{
        width:10;
        height:110;
        background: hsl(30,60%,70%);/*linear*/
        transform:rotatex(90deg) rotatey(90deg) translatex(-50px) translatey(-5px) translatez(-5px);
      }
      .LLH4{
        width:10;
        height:110;
        background:hsl(30,60%,70%);/*linear*/
        transform:rotatex(90deg) rotatey(90deg) translatex(-50px) translatey(-5px) translatez(5px);
      }
      
      
      /*ที่วางแขน*/
      .arm{
        position:absolute;
        transform-style: preserve-3d;
        top:0;
        left:0;
      }

.A1{
        width:10px;
        height:100px;
        background:hsl(30,60%,70%);/*linear*/
        transform: translatez(30px);
      }
      
      .A2{
        width:10px;
        height:100px;
        background:hsl(30,60%,70%);/*linear*/
        transform: translatez(30px) translatex(290px);
      }
      
      .A3{
        width:10px;
        height:100px;
        background:hsl(30,60%,70%);/*linear*/
        transform: translatez(25px);
      }
      
      .A4{
        width:10px;
        height:100px;
        background:hsl(30,60%,70%);/*linear*/
        transform: translatez(25px) translatex(290px);
      }
      
      .A5{
        background:hsl(30,50%,50%);
        width:100px;
        height:5px;
        transform: rotatex(90deg) rotatey(90deg) translatey(28px) translatex(48px) translatez(-40px);
      }
      
      .A6{
        background:hsl(30,50%,50%);
        width:100px;
        height:5px;
        transform: rotatex(90deg) rotatey(90deg) translatey(28px) translatex(48px) translatez(-50px);
      }
      
      .A7{
        background:hsl(30,50%,50%);
        width:100px;
        height:5px;
        transform: rotatex(90deg) rotatey(90deg) translatey(28px) translatex(48px) translatez(239px);
      }
      
		.A8{
        background:hsl(30,50%,50%);
        width:100px;
        height:5px;
        transform: rotatex(90deg) rotatey(90deg) translatey(28px) translatex(48px) translatez(250px);
      }
      
      
      
      /*ที่พิง*/
      
      .ping{
        position:absolute;
        transform-style: preserve-3d;
        top:0;
        left:0;
      }
      
      .P1{
        background:hsl(30,60%,70%);/*linear*/
        transform: translatez(50px);
        width:300px;
        height:10px;
      }
      .P2{
        background:hsl(30,60%,70%);/*linear*/
        transform: translatez(28px);
        width:300px;
        height:10px;
      }
      
      .P3{
        background:linear-gradient(hsl(30,50%,50%),hsl(30,65%,60%),hsl(30,50%,50%));
        transform: rotatex(90deg) translatez(3px) translatey(39px);
        width:300px;
        height:23px;
      }
      
      .P4{
        background:linear-gradient(hsl(30,50%,50%),hsl(30,65%,60%),hsl(30,50%,50%));
        transform: rotatex(90deg) translatez(12px) translatey(39px);
        width:300px;
        height:23px;
      }
      
      @keyframes cycle{
        form{transform:rotatex(60deg) rotateZ(0deg)}
        to{transform:rotatex(60deg) rotateZ(360deg)}

}
      
      
    </style>
  </head>
  
  <body>
    <div class="main"> 
      <div class="nang"> 
        <div class="n1"> </div>
        <div class="n2"> </div>
        <div class="n3"> </div>
        <div class="n4"> </div>
        <div class="n5"> </div>
        
        <div class="leg LLF1"> </div>
        <div class="leg LLF2"> </div>
        <div class="leg LLF3"> </div>
        <div class="leg LLF4"> </div>
        
        <div class="leg LRF1"> </div>
        <div class="leg LRF2"> </div>
        <div class="leg LRF3"> </div>
        <div class="leg LRF4"> </div>
        
        <div class="leg LLH1"> </div>
        <div class="leg LLH2"> </div>
        <div class="leg LLH3"> </div>
        <div class="leg LLH4"> </div>
        
        <div class="leg LRH1"> </div>
        <div class="leg LRH2"> </div>
        <div class="leg LRH3"> </div>
        <div class="leg LRH4"> </div>
        
        <div class="arm A1"> </div>
        <div class="arm A2"> </div>
        <div class="arm A3"> </div>
        <div class="arm A4"> </div>
        <div class="arm A5"> </div>
        <div class="arm A6"> </div>
        <div class="arm A7"> </div>
        <div class="arm A8"> </div>
        
        
        <div class="ping P1"> </div>
        <div class="ping P2"> </div>
        <div class="ping P3"> </div>
        <div class="ping P4"> </div>
        
      </div>
    </div>
  </body>
  
  
</html>