CSS3-transformを使って色々とサンプルを作っています。CSS3はIE10でサポートされはじめており、IE10未満では動作しません。

反転させる

CSSは次のとおり

.anime04c{
      font:35px bold;
      color:#000;
      padding:25px;
      -webkit-transition: 0.3s ease-in-out;
      transition: 0.3s ease-in-out;
      text-align:center;
}

.anime04c:hover{
      -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
      -ms-transform: matrix(-1, 0, 0, 1, 0, 0);
      transform: matrix(-1, 0, 0, 1, 0, 0);
      filter:progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}

反転させます

変形させる

CSSは次のとおり

.anime02{
        background:#000;
        color:#fff;
  　　　padding:25px;
　　　　-webkit-transition: 1s ease-in-out;
       transition: 1s ease-in-out;
}

.anime02:hover{
　　　　-webkit-transform: skewY(-15deg);
       -ms-transform: skewY(-15deg);
       transform: skewY(-15deg);
}

前回転させる

IE10はtransform-styleに対応していませんので完全な動作はしません。
CSSとHTMLは次のとおり

#main_ts ul li {
    -webkit-perspective: 4000px;
    perspective: 4000px; 
    position: relative;
    width: 180px;
    height: 60px;
    display: inline-block;
    margin: 10px 10px 20px 10px;
    vertical-align: top;
    cursor: pointer;
}
#main_ts ul li .item {
    height: 60px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform .6s; /* 0.6秒の省略した書き方です。 */
    transition: transform .6s;
}

#main_ts ul li .item:hover {
    -webkit-transform: translateZ(-25px) rotateX(90deg);
    -ms-transform: translateZ(-25px) rotateX(90deg);
    transform: translateZ(-25px) rotateX(90deg);
}

#main_ts ul li .item:hover .hover {
    box-shadow: 0px 3px 5px #999999;
}
#main_ts ul li .item:hover .normal {
    box-shadow: none;
}

#main_ts ul li .normal {
    position: absolute;
    top: 0;
    width: 180px;
    height: 45px;
    text-align: center;
    padding: 15px 0 0 0;
    -webkit-transform: translateZ(25px);
    -ms-transform: translateZ(25px);
    transform: translateZ(25px); 
    -webkit-transition: all .6s;
    transition: all .6s;
    background-color: #dddddd;
    box-shadow: 0px 3px 5px #999999;
    background: -webkit-linear-gradient(top, #eeeeee 0%, #d2d2d2 100%);
    background: linear-gradient(top, #eeeeee 0%, #d2d2d2 100%);
    text-shadow: 1px 1px 0px #ffffff;
    font-size: 18px;
}

#main_ts ul li .hover {
    position: absolute;
    top: 0;
    width: 160px;
    height: 40px;
    padding: 10px;
    -webkit-transform: rotateX(-90deg) translateZ(25px);
    -ms-transform: rotateX(-90deg) translateZ(25px);
    transform: rotateX(-90deg) translateZ(25px);
    -webkit-transition: all .6s;
    transition: all .6s;
    background-color: #d2d2d2;
    box-shadow: none;
    background: -webkit-linear-gradient(top, #eeeeee 0%,#d2d2d2 100%);
    background: linear-gradient(top, #d2d2d2 0%, #aaaaaa 100%);
}

中略
<div id="main_ts">
    <ul>
       	<li>
           <div class="item">
                <div class="normal">company</div>
                <div class="hover">会社の紹介をいたします。</div>
           </div>
        </li>
        <li>
           <div class="item">
              <div class="normal">service</div>
              <div class="hover">弊社サービスをご紹介いたします。</div>
           </div>
        </li>
        <li>
           <div class="item">
               <div class="normal">access</div>
               <div class="hover">弊社までの道のりをご紹介いたします。</div>
           </div>
        </li>
    </ul>
</div>

画像切り替え

CSSとHTMLは次のとおり。

.demo-05 img {
     -webkit-transition: all 1s ease-in-out;
     transition: all 1s ease-in-out;
}
img.swap1 {
     opacity: 1.0;
}
.demo-05:hover img.swap1 {
     opacity: 0;
}
img.swap1 {
     position: absolute;
}
中略
<div class="demo-05" style="display: block;">
  <img class="swap1" src="http://example.com/wp-content/images/lanterns.jpg" width="700" height="200" alt="サンプル画像1">
  <img class="swap2" src="http://example.com/wp-content/images/yokohama.jpg" width="700" height="200" alt="サンプル画像2">
</div>