当社リクルートサイトの事例紹介です。
クリエイティブWebデザイナーの採用を目的として構築しました。
（募集は終了しました。ご応募ありがとうございました）

• 株式会社インフォマーク　クリエイティブWebデザイナーリクルートサイト

何故回転するレイアウトを採用したか？

従来のレイアウトから一度離れ、常識にとらわれないレイアウトを模索した結果、たどり着きました。
新しいUIはユーザーに受け入れられるまでユーザビリティが低い印象を与えるリスクがあることは事実ですが、実際に構築しないことにはメリット・デメリット（課題）が明確になりませんし、新しいものは創造できません。

また、今回のターゲットはリテラシーが高く、大きな戸惑いは与えないだろうと判断したことも理由の一つです。
創意工夫して、テクノロジーからアイデア作品を創造出来るWebデザイナーを求めている、というメッセージでもあります。

レイアウトの仕組み

1. 大枠のレイアウト

サンプルが冗長にならないようレイアウト以外のコードは省いていますが、基本は下記構造で、#contentsをCSS3 transform（rotate）で90度ずつ回転させます。

HTML

<div id="contents">
<section id="page1">1ページ目</section>
<section id="page2">2ページ目</section>
<section id="page3">3ページ目</section>
<section id="page4">4ページ目</section>
</div>

CSS

div#contents {
position: relative;
margin-left: -1000px;
width: 2000px;
height: 2000px;
-webkit-border-radius: 1000px;
border-radius: 1000px;
}
/* コンテナ */
div#contents {
z-index: 100;
-webkit-transition: -webkit-transform 1.2s cubic-bezier( 0, 0, 0.3, 1 ) 0s;
transition: transition 1.2s cubic-bezier( 0, 0, 0.3, 1 ) 0s;
}
/* 各ブロックレイアウト */
div#contents section {
position: absolute;
width: 1000px;
height: 1000px;
}
div#contents section#page1 { top: 0;right: 0; }
div#contents section#page2 { top: 0;left:  0; }
div#contents section#page3 { bottom: 0; left:  0; }
div#contents section#page4 { bottom: 0; right: 0; }

2. コンテンツの向きを調整

上記1で回転レイアウトのベースが出来ました。
ただ、このままではとてもコンテンツが読める状態とは言えません。
（手元のA4文書を90度回転させた状態をイメージしてください）

そこでコンテンツが左上から右下へ流れるよう、角度（rotate）を調整します。

div#contents section#page2 { -webkit-transform: rotate( 270deg ); transform: rotate( 270deg ); }
div#contents section#page3 { -webkit-transform: rotate( 180deg ); transform: rotate( 180deg ); }
div#contents section#page4 { -webkit-transform: rotate( 90deg );  transform: rotate( 90deg );  }

3. ページ送りクリックでコンテンツを回転

最後に、ページ送りを設置し、クリックしたらコンテンツが回転するようJSを使って角度を変化させます。

HTML

<ul id="pager">
<li><a href="#page1">1</a></li>
<li><a href="#page2">2</a></li>
<li><a href="#page3">3</a></li>
<li><a href="#page4">4</a></li>
</ul>

JS

var contents = document.querySelector( '#contents' ),
pagerAnchor = document.querySelector( '#pager a' );

for ( var i = -1, l = pagerAnchor.length;  ++i < l; ) {
pagerAnchor[i].addEventListener( 'click', function( e ) {
contents.style.webkitTransform = 'rotate(' + ( 90 * this.href.replace( /.*(\d)$/, '$1' ) - 90 ) + 'deg)';
e.preventDefault();
}, false );
}