簡單玩弄 transform & transition

CSS3 常用到動畫效果，最重要就是跟 transform & transition 做好朋友，底下範例相信能對 transition & transform 能有基本的認識及了解才對。

HTML:
<div id="wrapper">

<div class="paneNest">
  <div class="pane">
    <div class="face front">
      Big
    </div>
    <div class="face back">
      Small
    </div>
  </div>
</div>
</div>

CSS:

*{
  -webkit-transition: all 10s;  // 過度效果及所需時間設定 all 指全部效果都處理
  -webkit-backface-visibility:hidden;
}

#wrapper {
  width:564px;
  height:164px;
  position:absolute;
  left:60%;
  margin-left:-282px;
  top:5%;
}

.paneNest {
  display:inline-block;
}

.paneNest:nth-child(odd):hover .pane {
  -webkit-transform: rotatex(-720deg) rotatey(-720deg) rotatez(-720deg)  scale(0.5,0.5); // transform 可以針對 rotateX rotateY rotateZ 三維做出不同旋轉效果，sacle 則為過度後呈現的大小，0.5是一半，這裡只有對 nth-child(odd) 也就是單數 div 做處理，如果想要兩張圖一直換，那就加上處理
nth-child(even) 就行囉
}

.pane{
  width:150px;
  margin:40px;
  height:150px;
  border-radius:30px;
  text-align:center;
  line-height:150px;
  transform-style:preserve-3d;  // 這裡是保留3D位置，預設 flat 是不保留。
}

.face {
  color:white;
  font-family:verdana;
  text-transform:uppercase;
  text-align:center;
  font-weight:900;
  font-size:50px;
  border-radius:30px;
  width:100%;
  height:100%;
}

.front {
  background:#61005e;
  -webkit-transform:translatez(1px);
}

.back {
  background:#c98600;
  -webkit-transform:translatez(-1px) translatey(-100%) rotatey(180deg) rotatez(180deg); // rotateY & rotatey 大小寫沒差別
}