html - HTML5/CSS3を使用した画像スタック

Question

HTML5 + CSS3多くの例があることは知っていますが、基本的にゴミがほとんど含まれていない場合、新しいスタイルを使用して画像スタックを実行するにはどうすればよいですか。

• 一度に表示される画像は1つだけです
• あるイベント（マウスダウン、ラウンドロビンなど）の後に前の画像の上に表示される次の画像

HTML5/CSS3新しいスタイルを使用してこの簡単なことを行う方法を知りたいですか？

Answer 1

スライドショーに余計なものを追加せずにそれがあなたが探しているものであるなら、私はスライドショーのかなり良い例を見つけました。1つは次の写真のタイマーを表示し、もう1つは背景を変更します。

CSS3ソリューションとステップごとの素晴らしいチュートリアルの両方

時限スライドショー（ボックス）
時限スライドショー（背景）

私はあなたの質問を誤解しなかったと思います。

Answer 2

個人的にはjQueryCycleを使用します-http ://jquery.malsup.com/cycle/

<div id="shuffle" class="pics">    
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />    
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />    
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />    
</div>

$('#shuffle').cycle({
    fx:     'fade',
    delay:  -4000
});

正直なところ、これにHTML5/CSS3メソッドがあるかどうかはわかりません。コンテナを画像のサイズに設定してから、すべての画像を絶対位置に設定して、画像が互いに「積み重ねられる」ようにするだけなので、これは通常のCSSです。次に、サイクルはそれらすべてを実行してアニメーションを実行します。

CSS3トランジションを使用することもできますが、質問でjQueryについて言及したので、Cycleが最善の策です。

Answer 3

これは私が今まで見つけた中で最高です

.stack {  position: relative; z-index: 10; }
.stack img { max-width: 180px; height: 180px; vertical-align: bottom; border: 5px solid #fff; border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    }