webで複数の商品やメニュー項目などを回転ラックのようにアニメーションしながら見せるカルーセルパネルの手法がありますが、ほとんどがjavascriptやjQueryなどによる実装です。これをCSSのみでおこないます。

次のサンプルは、5枚の画像を風車のように自動で回転させるものです。マウスを乗せるとその位置で一時停止します。また、画像にリンクが設定してあれば、クリックで移動します。雲の画像のみ「百万石 WEB受注システム」へのリンクを設定しています。

実装：

HTMLソース

<div class="stage" style="padding-left: 180px; height: 160px;">
  <div class="spinner" style="-webkit-transform-origin: 180px 0 0; -moz-transform-origin: 180px 0 0; -ms-transform-origin: 180px 0 0;">
    <img style="-webkit-transform: rotateY(-0deg) translateX(180px); -moz-transform: rotateY(-0deg) translateX(180px); -ms-transform: rotateY(-0deg) translateX(180px); padding: 0px 0 0px 160px;" src="img3/001.png" alt="" height="160" width="200">
    <a href="../p001/001.html"><img style="-webkit-transform: rotateY(-72deg) translateX(180px); -moz-transform: rotateY(-72deg) translateX(180px); -ms-transform: rotateY(-72deg) translateX(180px); padding: 0px 0 0px 147px;" src="img3/002.png" alt="" height="160" width="213"></a>
    <img style="-webkit-transform: rotateY(-144deg) translateX(180px); -moz-transform: rotateY(-144deg) translateX(180px); -ms-transform: rotateY(-144deg) translateX(180px); padding: 0px 0 0px 120px;" src="img3/003.png" alt="" height="160" width="240">
    <img style="-webkit-transform: rotateY(-216deg) translateX(180px); -moz-transform: rotateY(-216deg) translateX(180px); -ms-transform: rotateY(-216deg) translateX(180px); padding: 0px 0 0px 147px;" src="img3/004.png" alt="" height="160" width="213">
    <img style="-webkit-transform: rotateY(-288deg) translateX(180px); -moz-transform: rotateY(-288deg) translateX(180px); -ms-transform: rotateY(-288deg) translateX(180px); padding: 0px 0 0px 122px;" src="img3/005.png" alt="" height="160" width="238">
  </div>
</div>

CSSソース

@-webkit-keyframes spinner {
  from { -webkit-transform: rotateY(0deg); }
  to   { -webkit-transform: rotateY(-360deg); }
}
@keyframes spinner {
  from {
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
.stage {
    margin: 1em auto;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    perspective: 1200px
}
.spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    -webkit-transform-style: preserve-3d;
    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 6s;
    transform-style: preserve-3d
}
.spinner:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}
.spinner img {
    position: absolute;
    border: 1px solid #ccc;
    background: rgba(255, 255, 255, .8);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, .2)
}