スライドショー３３面白２

■サムネイル(縮小画像)にマウスオーバーすると、画像がその位置で左右回転しながら自動拡大します。
■最後の画像だけ、拡大画像をクリックすると、さらに大きな画像(横500px縦500px)に飛びます。
JavaScriptを全く使用していません。CSSだけの自動拡大＆左右回転のサムネイル・スライドです。

■マウスオーバーで拡大だけするJavaScriptはこちら→　スライドショー３２■面白２■超簡単CSSで自動拡大サムネイル

上記の拡大だけのJavaScriptに、さらに左右回転を追加しました。
上記のCSSに、rotateY(360deg)を追加しています。rotateX(360deg)にすると上下回転になります。
なお今回の見本は、拡大画像が画像実寸です。

このCSSの拡大参考は9ineBBから。回転参考はHTMLクイックリファレンスから。

ソースの中をどこでも左クリックで『すべて選択』→右クリックで『コピー』を指定。ソースエリアの外をクリックすると『すべて選択』は消えます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>スライドショー３３面白２</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
/*★見本の使用画像実寸は横幅300px縦幅300px。自分の使用画像のサイズによって、間隔や拡大比率を調整する*/
/*★サムネイル(縮小画像)全体の位置指定*/
.big{
margin-top:150px;/*★上からの位置*/
text-align:center;/*★画像は左右中央配置*/
}

/*★サムネイル(縮小画像)の指定*/
.big img {
transition:all 1s;/*★自動拡大の時間指定。 1sは１秒*/
margin:20px;/*★縮小画像同士の間隔指定。拡大画像の下に完全に隠れないように間隔を調整。*/
height:150px;/*★今回の縮小画像は画像実寸ではないので、縦幅のみ指定。実寸なら指定不要*/
}

/*★マウスオーバー時の拡大画像の指定*/
.big img:hover {
transform: scale(2) rotateY(360deg);/*★拡大画像は、縮小画像(縦150px)の2.5倍指定。(1)はそのまま。(1.5)は1.5倍。(2)は2倍…。rotateYは縦回転。rotateXなら横回転*/
}
-->
</style>
<!--★ここまでコピー。別に、bodyの中にもコピーがあります-->

</head>
<body bgcolor="#ffffcc">

<!--★ここからコピー。サムネイル指定。class="big"必須。並べ方はお好みで。最後の画像だけ、もっと大きな拡大画像へのリンク付き-->
<div class="big">
<img src="ir5.png"><img src="ir6.png"><img src="ir7.png"><br>
<img src="ir8.png"><img src="ir9.png">
<a href="ir10.png" target="_new"><img src="ir10b.png" title="クリックで拡大画像"></a><!--★最後の画像だけクリックで大きな拡大画像へのリンク指定-->
</div>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

スライドショー３３■面白２■ 超簡単CSSで拡大回転サムネイル UP日時 : 2015/03/30

スライドショー３３■面白２■　超簡単CSSで拡大回転サムネイル　　　　UP日時 : 2015/03/30