[Google Site] hover.css效果

A collection of CSS3 powered hover effects，如同官方網站所宣稱，是一組由css組成的效果，不必額外透過js的支援來讓網頁的物件移動，對GoogleSite來說當然是美事一樁，不必擔心Google更新，部分js不能使用，單純用css對程式碼的理解和維護也相對輕鬆。

可以從GitHub下載Hover.css、直接從上面複製部分css程式碼或是透過<link>也可以啦，三種方法各有千秋，下文要示範的是直接複製，算是對維護者來說比較保險、長久的作法。

1. 首先，可以找三張你想要的圖片來做練習，因為會使用到htmlbox中css style的功能，所以可以把原先的style去掉，變成比較乾淨的格式。
2. 到hover.css選一個你想要的效果，把它複製下來備用，例如你在demo站看到Grow這個效果，你可以到hover.css找到.hvr-grow，然後複製下來，這次的範例用的是.hvr-rotate。
3. 在一開始的<div>中間加入 class="hvr-rotate"，就可以使用hover.css的功能囉！
4. ps.我的範例中class還有加入list-images，看官可以自行調整看是否有需要。

Demo Site

Original html Source

<div class="wrapper">
<div class="list-images hvr-rotate "><img class="hvr-float-shadow" border="0" src="https://lh3.googleusercontent.com/-XpfjBctq8qo/U37FoHU_NhI/AAAAAAAAQo4/Ljlc5uxBcYU/s400/P1230815.JPG" ></div>
<div class="list-images hvr-rotate"><img border="0" src="https://lh3.googleusercontent.com/-Gwtldcjx3M0/U31O5Ee3aOI/AAAAAAAAQnc/PO3yzYvBJGU/s400/P1160548.JPG" ></div>
<div class="list-images hvr-rotate"><img border="0" src="https://lh3.googleusercontent.com/-4M_ELsMBYsg/TnLTxRjGDDI/AAAAAAAAM-c/N8o0g7BxOTg/6.jpg" ></div>
</div>
<style type="text/css">
  .wrapper{
      width:100%;
      height: 350px;
      padding-top: 20px;
    }
  .list-images{
    display:block;
    float: left;
    padding: 8px;
    border: 1px solid #ddd;
    width:25%;
    margin-right: 3%;
  }
  .list-images img{
      width:100%;
    }
.hvr-rotate {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-rotate:hover, .hvr-rotate:focus, .hvr-rotate:active {
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}
</style>