CSS3を使った画像の可視範囲が広がるロールオーバー

CSS3を使ってイロイロ作ってみよう第一弾です。今までのCSSでは出来ないことをやってみたい。実用性なんて気にするな。ただ面白そうなことを実現しよう。そんな気持ちで制作しました。今後も続けていきたいと思ったので、一応第一弾なんていってみました。CSS3を初めて知ったときの感動や喜びを忘れず、子供のような発想でCSS3を使いまわすのが目標です。

ちなみに今回は「CSS3を使った画像の可視範囲が広がるロールオーバー」なんて見出しになっていますが、コレ以上なんて表現していいのか思いつかなかったのでデモを見て下さいな。

Demo

対応ブラウザ

  • Google Chrome
  • Safari4~
  • Firefox3.6~

※Windowsのみの確認です。

コーディング&設定

HTML

一行ずつulで囲みます。奇数行のulliよりひとつ少ない数だけ偶数行のulliを記述します。

<div id="clipImage">
	<ul>
		<li><span><a href="#"><img src="sample1.jpg"></a></span></li>
		<li><span><a href="#"><img src="sample2.jpg"></a></span></li>
		<li><span><a href="#"><img src="sample3.jpg"></a></span></li>
	</ul>
	<ul>
		<li><span><a href="#"><img src="sample4.jpg"></a></span></li>
		<li><span><a href="#"><img src="sample5.jpg"></a></span></li>
	</ul>
	<ul>
		<li><span><a href="#"><img src="sample6.jpg"></a></span></li>
		<li><span><a href="#"><img src="sample7.jpg"></a></span></li>
		<li><span><a href="#"><img src="sample8.jpg"></a></span></li>
	</ul>
</div>

CSS

spanを45度回転してaで可視範囲を指定しimgで45度逆回転をかけて画像だけ通常の角度に戻します。aで可視範囲を指定し角度も45度に回転していますので、ダイヤ状に画像が切り抜かれて見えます。

マウスオーバーで画像全体が表示されます。まずliのサイズを拡大しspanの角度を回転して元に戻し、さらに最前面に持ってきます。同時にaの可視範囲を画像全体まで広げimgの角度を回転して元に戻します。webkitの場合はアニメーションで回転しながら可視範囲が広がっていきます。

div#clipImage {
	padding: 20px 20px 31px;
}
div#clipImage ul {
	margin-bottom: -85px;
}
div#clipImage ul:last-child {
	margin-bottom: 0;
}
div#clipImage ul:nth-child(2n) {
	margin-left: 85px;
}
div#clipImage ul li {
	display: inline-block;
	width: 166px;
	height: 166px;
	position: relative;
}
div#clipImage ul li span {
	width: 100px;
	height: 100px;
	background: -webkit-gradient(linear,left top,right bottom,from(#fff),to(#ccc));
	background: -moz-linear-gradient(left top,#fff,#ccc);
	border: 1px solid #ccc;
	padding: 9px;
	margin: 30px 0 0 30px;
	position: absolute;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transition: all 0.2s ease-in-out;
}
div#clipImage ul li span a {
	display: block;
	position: absolute;
	clip: rect(0,100px,100px,0);
	-webkit-transition: all 0.2s ease-in-out;
}
div#clipImage ul li span a img {
	position: absolute;
	top: -50px;
	left: -50px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-webkit-transition: all 0.2s ease-in-out;
}
div#clipImage ul li span:hover {
	width: 200px;
	height: 200px;
	margin: -20px 0 0 -20px;
	z-index: 100;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
}
div#clipImage ul li span:hover a {
	clip: rect(0,200px,200px,0);
}
div#clipImage ul li span:hover a img {
	top: 0;
	left: 0;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
}

その他

用意する画像は200×200のサイズのみ対応です。他のサイズの場合どの数値をどう変更したいいのか自分でも把握していません。今度計算式でも作くろうかな。ルートとかでそうですがw

あとがき

今回は以前書いた記事よりも説明を増やしてみました。今後はソースの説明とかを増やしていこうかと思います。書くことによりシッカリと理解出来るようになるかと思いますので。ホント基本的なこととか知らなかったりするのでいい勉強になります。

Top