css3のtransformを使って画像のモーダルウィンドウを作ってみた

css3でインタラクティブな動きが実装出来るは周知のことでしたが、
実際のサイトで使われていることも多くなってきました。

最近気になったのが以下のサイトになります。

はじめて持つなら、このカード。三井住友VISAデビュープラスカード | 三井住友VISAカード

css3をふんだんに使用して、インタラクティブなサイトなつくりになってます。
IEはどうしているのかな思ってたんですが、IEでは普通に縦長サイトとして構成されており、
インタラクティブさは皆無でした。
これはいわゆるプログレッシブエンハンスメントの考え方で素晴らしいですね！

このサイトで気になったエフェクトをちょっと試してみたいと思い、
実際に作ってみました。

サイトではページの切り替わりとして使用されていますが、
僕の方では、モーダルウィンドウとして作りました。

DEMO

扉というか蓋というかそんな感じのものが閉まるようなエフェクトなのですが、
(下駄箱の扉の逆ver？？)
こちらは、transformのperspective,rotate,と、
transform-origin、transitionを使用しています。

transformのrotate(今回はX軸)で、回転し、
perspectiveで遠近感を持たせ奥が細くみえるようにし、
transform-originで上の辺を起点にしています。
transitionはアニメーションのスピードを設定しています。

具体的なcssは以下になります。


#modalMask {
	transform: perspective(500px) rotateX(-60deg);
	-webkit-transform: perspective(500px) rotateX(-60deg);
	-moz-transform: perspective(500px) rotateX(-60deg);
	transition: all 0.8s;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	transform-origin: center top 0;
	-webkit-transform-origin: center top 0;
	-moz-transform-origin: center top 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255 ,0);
	position: fixed;
	visibility: hidden;
	top: 0px;
	left: 0px; 
	z-index: 999;
	
}
#modalMask.on
{
	background-color: rgba(255, 255, 255 ,0.75);
	-webkit-transform: translate3d(0px, 0px, 0px);
	visibility: visible;
}

#modalMask {

transform: perspective(500px) rotateX(-60deg);

-webkit-transform: perspective(500px) rotateX(-60deg);

-moz-transform: perspective(500px) rotateX(-60deg);

transition: all 0.8s;

-webkit-transition: all 0.8s;

-moz-transition: all 0.8s;

transform-origin: center top 0;

-webkit-transform-origin: center top 0;

-moz-transform-origin: center top 0;

width: 100%;

height: 100%;

background-color: rgba(255, 255, 255 ,0);

position: fixed;

visibility: hidden;

top: 0px;

left: 0px;

z-index: 999;

}

#modalMask.on

{

background-color: rgba(255, 255, 255 ,0.75);

-webkit-transform: translate3d(0px, 0px, 0px);

visibility: visible;

}

htmlは以下です。


<div id="modalMask">
    <div id="modalWin">
      <div class="modalinner">
        <p id="Image">
        <img src="">
        </p>
      </div>
    </div>
  </div>

</p>

</div>

後は、jQueryで、写真をクリックすると、
#modalMaskにclass「on」をつけるようにしました。
jquery等でtransformを制御するのは、かってが違うようでしたので、
今回はこのようにしました。

ちなみにjQueryのソースは以下になります。


$(function(){

	$(".modal").click(function(){
		var Img = $(this).attr("href");
		$("#Image img").attr("src",Img);
		$("#modalWin").fadeIn('normal');
		$("#modalMask").addClass('on');
		return false;
	});
	$("#modalMask").click(function(){
		$("#modalMask").removeClass('on');
		$("#modalWin").fadeOut();
	});
});