CSS Drivers Dashboard

オリジナル：Qiita CSSで運転席を再現してみた。 http://qiita.com/junya/items/617c02277969e9aa46e7

by MKGaru

HTML

<div style="margin-bottom:3em"><a href="http://qiita.com/junya/items/617c02277969e9aa46e7">オリジナル：Qiita CSSで運転席を再現してみた。</a>
</div>

<div class="driver-view">
  <!-- フロントガラス -->
  <div class="windshield"></div>
  <div class="window">
    <iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sja!2sus!4v1442556302214!6m8!1m7!1s262ntlY8FKLt0E6097HFEw!2m2!1d35.65980263514897!2d139.7006247347328!3f14.302642853786857!4f-8.892813567266117!5f0.7820865974627469"  frameborder="0" style="border:0" allowfullscreen></iframe>
  </div>
  <div class="car">
    <!-- ワイパー操作 -->
    <input type="checkbox" id="wiper-switch">
    <label class="toggle-switch" for="wiper-switch"></label>
    <!-- ワイパー -->
    <div class="wiper1"></div>
    <div class="wiper2"></div>
    <!-- ルームミラー -->
    <div class="room-mirror"></div>
    <div class="room-mirror-window"><iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sja!2sus!4v1442557591501!6m8!1m7!1s262ntlY8FKLt0E6097HFEw!2m2!1d35.65980263514897!2d139.7006247347328!3f195.8669000508647!4f-9.629165347469154!5f0.7820865974627469"  frameborder="0" style="border:0"></iframe></div>
    <!-- センタークラスター -->
    <div class="center-cluster">
      <div class="hazard">
        <div class="triangle"></div>    
      </div>
      <div class="air-panel1">
        <div class="filter"></div>
      </div>
      <div class="air-panel2">
        <div class="filter"></div>
      </div>
      <div class="nav">
        <div class="arrow"></div>
        <div class="road"></div>
      </div>
    </div>
    <!-- ハンドル -->
    <div class="handle">
      <div class="horn"></div>
    </div>
    <!-- メーター -->
    <div class="meters">
      <div class="speed-meter">
        <div class="pointer"></div>
        <span>0</span>
        <span>20</span>
        <span>40</span>
        <span>60</span>
        <span>80</span>
        <span>100</span>
        <span>120</span>
        <span>140</span>
        <span>160</span>
        <span>180</span>
      </div>
     ...

CSS

html,body{
  width: 100%;
  height: 100%;
  margin: 0;
}

/* チェックされたらアニメーション起動 */
#wiper-switch:checked ~ .wiper1,
#wiper-switch:checked ~ .wiper2{
  animation: wiper 1.5s ease-in-out infinite alternate;
}


.speed-meter .pointer{
  animation: _meter 4s ease-in-out infinite alternate;
}

@keyframes _meter{
  from{
    transform: rotate(75deg) translateX(-50%) translate(-50%,-50%);
  }

  to{
    transform: rotate(85deg) translateX(-50%) translate(-50%,-50%);
  }
}


@keyframes wiper{
  from{
    transform: rotate(5deg);
  }

  to{
    transform: rotate(170deg);
  }
}

/* 運転席 */
.driver-view{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-perspective: 200;
}

.windshield{
  position: absolute;
  width: 100%;
  height: 65%;
  border-top: 30px solid #000;
  border-right: 50px solid #000;
  border-bottom: 10px solid #000;
  border-left: 50px solid #000;
  border-radius: 15% 15% 10% 10%;
  background: rgba(150,150,250,0.1);
  box-sizing: border-box;
  transform: rotateX(-3deg);
  -webkit-perspective: 300;
  box-shadow: 
    0 0 0 3px #eee inset,
    0 -5px 0 3px #eee inset,;
  z-index:3;
  pointer-events:none;
}
.window{
    margin:15px 40px;
    width:calc(100% - 80px);
    height:55%;
    background:white;
    position:absolute;
    z-index:0;
    -webkit-perspective: 300;
    pointer-events:none;
}
.window iframe{
    width: 100%;
    height:100%;
}

.car{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*pointer-events:none;*/
}

.wiper1,.wiper2{
  position: absolute;
  bottom: 25%;
  width: 35%;
  height: 15px;
  border-radius: 50% 30% 0 20%;
  background: #000;
  transform-origin: right top;
  transform: rotate(6deg);
}

.wiper1{
  left: 140px;
}

.wiper2{
  left: 335px;
}

#wiper-switch{
  display: none;
}

.toggle-switch{
  position: absolute;
  top: 70%;
  left: 64%;
  width: 30px;
  height: 200px;
  border-radius: 35% 15% 0 0;
  background: #464845;
  transform: rotate(-70deg);
}

.room-mirror{
 ...