CSSでホバーするとドアのように開くアニメーションを実装する

デモ

Christmas Experiments
このページのアニメーションがかっこよくて、ホバーしたらドアのように開くのをCSSで書いてみた。

アニメーションの回転軸をずらす

-webkit-transform-origin: left 50%;
	-moz-transform-origin: left 50%;
	transform-origin: left 50%;

「transform-origin」を使う。回転軸を左端にするには「left」、右端にするには「right」を使えば良い。
http://stackoverflow.com/questions/8853009/door-opening-3d-effect-in-css
CSS transform-origin property

アニメーションの「perspective」や「rotate」のイメージがつかめないときはこちらのテスターを使う。
3D CSS Tester

ホバーすると他のdivが変化するようにする

#box:hover > #door1{
	-webkit-transform: perspective(500) rotateY(90deg);
	-moz-transform: perspective(500) rotateY(90deg);
	transform: perspective(500) rotateY(90deg);
	-webkit-transform-origin: left 50%;
	-moz-transform-origin: left 50%;
	transform-origin: left 50%;
}

子要素「>」を使えばよい。この場合だと「#box」にマウスを乗せると「#door1」が変化する。

html - Animating an element when hovering on two other element using css - Stack Overflow

ホバーが外れるとアニメーションが逆再生される

#box:hover > #door2{
     -webkit-animation: door-right 0.5s ease ; /* Chrome, Safari 5+ */
     -moz-animation: door-right 0.5s ease ; /* Firefox 5-15 */
       -o-animation: door-right 0.5s ease ; /* Opera 12.00 */
          animation: door-right 0.5s ease ; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
     -webkit-animation-fill-mode:forwards;
}

@-webkit-keyframes door-right {
    from {
       -webkit-transform: perspective(500) rotateY(0deg);
       -webkit-transform-origin: right 0%;
    }
    to {
       -webkit-transform: perspective(500) rotateY(-90deg);
        -webkit-transform-origin: right 50%;
    }
}

これではアニメーションが終わった状態を維持するが、ホバーが外れるとすぐに、最初の状態に戻ってしまう。もっとじわっと戻らせたいと思った。

.base{
	position:absolute;
	top:0;

	width:100px;
	height:200px;
	background:#000;
	opacity:0.3;

	-webkit-transition: all 0.5s ease-out;  /* Chrome 1-25, Safari 3.2+ */
	-moz-transition: all 0.5s ease-out;  /* Firefox 4-15 */
	-o-transition: all 0.5s ease-out;  /* Opera 10.50–12.00 */
	transition: all 0.5s ease-out;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */
}

/*---------------------------------
left door
---------------------------------*/
#door1{
		left:0;
		-webkit-transform: perspective(500) rotateY(0deg);
		-moz-transform: perspective(500) rotateY(0deg);
		transform: perspective(500) rotateY(0deg);
		-webkit-transform-origin: left 0%;
		-moz-transform-origin: left 0%;
		transform-origin: left 0%;
}

#box:hover > #door1{
	-webkit-transform: perspective(500) rotateY(90deg);
	-moz-transform: perspective(500) rotateY(90deg);
	transform: perspective(500) rotateY(90deg);
	-webkit-transform-origin: left 50%;
	-moz-transform-origin: left 50%;
	transform-origin: left 50%;
}