/* 3d_transform.css */

#joe {
  animation-name: sleepyJoe;
  animation-duration: 6s;
  animation-fill-mode: forwards;
}

@keyframes sleepyJoe{
  0%{
    transform: translateX(0px) translateY(0px);
  }
  25%{
    transform: translateX(600px) translateY(250px)
  }
  50%{
    transform: rotateY(180deg) translateX(-600px) translateY(250px);
  }
  75%{
    transform: translateX(0px) rotateY(180deg) translateY(500px);
  }
  100%{
    transform: translateX(0px) translateY(0px);
  }
}

article {
  position: relative;
}

article section {
  position: relative;
  top: 2.44em;
  width: 400px;
  height: 302px;
  padding: 0 1em 0.5em 0.5em;
  background-color: rgba(16, 16, 16, 0.95);
  transition: transform 0.5s;
}

article section nav {
  width: 110%;
  text-align: right;
  background-color: rgba(16, 16, 16, 0.95);
  padding: 0.5em;
}

.visible{
  transform: translateX(690px)
}