A-SSPIM (Copy 13977)

✨ PEERANUT TIPRAK

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        background:#333;
        margin:2em;
      }
      .screen{
        height:670px;
        width:1400px;
        margin:auto;
        border: solid 15px brown;
        border-radius:10px;
        overflow:hidden;
        position:absolute;
        transition:background .3s;
        z-index:0;
      }
      #my_picture{
        height:100%;
        width:200%;
        position:relative;
        background-image:url(https://cdn.discordapp.com/attachments/942053575624917023/942409383135043674/wall.png);
        transition: all 2s;
        z-index:1;
      }
      #my_picture[data-day="1"]{
        transform: translatex(-1400px)
      }
      .car{
			position:absolute;
         height:500px;
         width:500px;
         background-image:url(https://64.media.tumblr.com/510287ad2f6b0be8fa6f9a7579cf3bf9/tumblr_mus2pvmTH31sv849mo1_500.gif);
        background-size:cover;
        transform:rotatey(180deg);
        top:45%;
        left:30%;
        z-index:3;
        animation:move 5s infinite linear alternate;
      }
      #toggle{
        position:absolute;
        bottom:1em;
        right:1em;
        background:#fff;
        padding:.5em;
        border-radius:4px;
        cursor:pointer;
        z-index:10;
      }
      @keyframes move{
        0%{
			  transform: translatex(0px) rotatey(180deg)
      } 50%{
        transform: translatex(100px) rotatey(180deg)
      } 100%{
        transform: translatex(-100deg) rotatey(180deg)
      }
    </style>
  </head>
  <body>
    <div class="screen">
      <div id="my_picture" data-day="-1"></div>
      <div class="car"></div>
      <div id="toggle" onclick="my_picture.dataset.day *= -1">
        Move</div>
    </div>
  </body>
</html>