dump truck

Open In Editor Video Publish Your Code

#dumper {
 position:relative;
 display: flex;
 align-items: baseline;
 left: 2.9em;
 transition: all 1s linear;
 transform-origin: bottom right;
 &:active {
  transform:rotate(25deg);
 }
 #front {
  height: 15em;
  width: 6em;
  background: #FAE80C;
  position:relative;
  box-shadow: 0 0 0 0.05em rgba(51,51,51,1), -0.4em 0 0 0.1em rgba(250,232,12,1), -0.5em 0 0 0.05em rgba(51,51,51,1), 0em 0 0 0.05em rgba(51,51,51,1), 0.4em 0 0 0.1em rgba(250,232,12,1), 0.5em 0 0 0.05em rgba(51,51,51,1) ;
  margin-left: 0.6em;
  margin-right: 0.6em;
  &::before {
   content: "";
   position: absolute;
   height: 0;
   width: 0;
   border-right: 3em solid #FAE80C;
   border-bottom: 4em solid transparent;
   left: -3.5em;
   z-index: -1;
  }
  &::after {
   content: "";
   position: absolute;
   height: 1em;
   width: 13em;
   background: #FAE80C;
   border-radius: 0.5em;
   top: -1em;
   left: -6.5em;
   border-left: 0.1em solid #333;
   border-top: 0.1em solid #333;
   border-bottom: 0.1em solid #333;
   box-shadow: -0.05em 0.05em 0.05em 0.05em rgba(51,51,51,0.5);
  }
 }
 #middle {
  height: 12em;
  width: 6em;
  background: #FAE80C;
  position:relative;
  box-shadow: 0em 0 0 0.05em rgba(51,51,51,1), 0.4em 0 0 0.1em rgba(250,232,12,1), 0.5em 0 0 0.05em rgba(51,51,51,1);
  margin-right: 0.6em;
  left:-0.1em;
  border-top:none;
  z-index:-1;
  &::before {
   content: "";
   position: absolute;
   height: 0;
   width: 0;
   border-left: 6em solid #FAE80C;
   border-top: 3em solid transparent;
   top:-3em;
   z-index:-1;
  }
  &::after {
   content: "";
   position: absolute;
   height: 1em;
   width: 8em;
   background: #FAE80C;
   border-radius: 0.5em;
   transform:rotate(27deg);
   top:-2.4em;
   left:-1em;
   border-top: 0.1em solid #333;
   border-bottom: 0.1em solid #333;
   box-shadow: -0.05em 0.05em 0.05em 0.05em rgba(51,51,51,0.5);
  }
 }
 #back {
  height: 9em;
  width: 6em;
  background: #FAE80C;
  position:relative;
  box-shadow: 0em 0 0 0.05em rgba(51,51,51,1), 0.4em 0 0 0.1em rgba(250,232,12,1), 0.5em 0 0 0.05em rgba(51,51,51,1);
  margin-right: 0.6em;
  left:-0.2em;
  z-index:-2;
  &::before {
   content: "";
   position: absolute;
   height: 0;
   width: 0;
   border-left: 6em solid #FAE80C;
   border-top: 3em solid transparent;
   top:-3em;
  }
  &::after {
   content: "";
   position: absolute;
   height: 1em;
   width: 8em;
   background: #FAE80C;
   border-radius: 0.5em;
   transform:rotate(27deg);
   top:-2em;
   left:-1em;
   border-top: 0.1em solid #333;
   border-bottom: 0.1em solid #333;
   box-shadow: -0.05em 0.05em 0.05em 0.05em rgba(51,51,51,0.5);
  }
 }
 #tail {
  height: 8.4em;
  width: 1em;
  background: #FAE80C;
  z-index: -3;
  position:relative;
  left:-0.3em;
  border-bottom: 0.1em solid #333;
  &::before {
   content: "";
   position: absolute;
   height: 0;
   width: 0;
   border-left: 5em solid #FAE80C;
   border-bottom: 8.4em solid transparent;
   right: -5em;
  }
  &::after {
   content: "";
   position: absolute;
   height: 1em;
   width: 7em;
   background: #FAE80C;
   border-radius: 0.5em;
   top:-1em;
   left:-0.7em;
   border-right: 0.1em solid #333;
   border-top: 0.1em solid #333;
   border-bottom: 0.1em solid #333;
   box-shadow: -0.05em 0.05em 0.05em 0.05em rgba(51,51,51,0.5);
  }
 }
 #details {
  width:0;
  height:0;
  position:relative;
  &::before {
   content: "";
   position: absolute;
   height: 0.1em;
   width: 9.8em;
   background: #333;
   transform: rotate(-58deg);
   top:-4.2em;
   left:-2.7em;
  }
  &::after {
   content: "";
   position: absolute;
   height: 0.1em;
   width: 5em;
   background: #333;
   transform: rotate(53deg);
   top:-13.1em;
   left:-25.4em;
   z-index:-3;
  }
 }
}

#base {
 width: 32em;
 height: 2.5em;
 background: #CCC;
 border-radius: 2em;
 border: 0.1em solid #333;
 position:relative;
 z-index: 5;
}

#base::before, #base::after {
 content:"";
 position: absolute;
 width: 0;
 height: 0;
 border-radius: 50%;
 border: 1.2em solid #EBB91B;
 box-shadow: 0 0 0 2em rgba(51,51,51,1);
 top: 0.5em;
 z-index:1;
}

#base::before {
 left: 6em;
}
#base::after {
 right: 4em;
}

#hydraulics {
 height:1.5em;
 width:14em;
 position:relative;
 background: #333;
 z-index:-3;
 transform: rotate(-45deg);
 top:-7.5em;
 left: 10em;
}

dump truck

Recommended

Indian Truck Sim

HTML

CSS

JS

Recommended

Indian Truck Sim

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS