autocarro con cassone ribaltabile

255 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice Hai bisogno di un sito web?

Consigliato

23 November 2024

Effetto passaggio del mouse sull'icona

21 October 2024

Goku contro Vegeta

HTML

CSS

.container {
 display: flex;
 justify-content: center;
 align-items: center;
 font-size: 10px;
 transform: translateY(75%);
 scale: 0.5;
}

#frame {
 display: flex;
 align-items: baseline;
 justify-content:left;
}

#truck {
 margin-top: 15em;
 margin-bottom: 3em;
}

#cab {
 width:7em;
 height:11em;
 background: #FEC10E;
 position:relative;
 left: 3em;
 border-top: 0.1em solid #333;
 border-right: 0.1em solid #333;
}

#cab::before {
 content: "";
 position: absolute;
 width:0;
 height:0;
 border-right: 2em solid #FEC10E;
 border-bottom: 0;
 border-left: 1em solid transparent;
 border-top:11em solid transparent;
 left: -3em;
}

#cab::after {
 content: "";
 position: absolute;
 width:0em;
 height: 11em;
 background: rgba(255,255,255,0);
 box-shadow: 0 0 0 0.1em rgba(51,51,51,1);
 top:0;
 left:-1em;
 transform: rotate(10.4deg);
 z-index:-1;
}

#cabdetail {
 content: "";
 width: 6em;
 height: 4em;
 background: #BEE7FB;
 position:relative;
 border-radius: 1em;
 border: 0.1em solid #333;
 top: 0.5em;
 left: 0.5em;
 box-shadow: inset 0.1em 0.1em 0.3em 0.3em rgba(255,255,255,0.5);
}

#cabdetail::before {
 content: "";
 width: 1.5em;
 height: 0;
 position:absolute;
 border-radius: 1em;
 border: 0.1em solid #333;
 top: 5.5em;
 right: 1em;
}

#cabdetail::after {
 content: "";
 width: 1.5em;
 height: 0;
 position:absolute;
 border-radius: 1em;
 border: 0.1em solid #333;
 top: 8.5em;
 left: -2.2em;
 box-shadow: -0.1em 0.3em, -0.15em 0.6em, -0.2em 0.9em
}

#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;
}

Consigliato

Effetto passaggio del mouse sull'icona

Goku contro Vegeta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS