html5の中心ピボットを中心にコンテンツを回転する

Question

だから私はグラフィックデシンジャーなので、クライアントの新しいサイトのコンセプトを開発するように求められました。限られた量のコンテンツを持つマイクロサイト。私が思いついたアイデアは、サイトのすべてのセクションをdivに配置し、ユーザーがメニューリンクをクリックするとホイールのように回転させることです。私が知る必要があるのは、これは、html5を使用して、中央のピボットポイントの周りの通常のコンテンツを含むdiv全体を回転させることは可能ですか？回転をアニメーション化する必要があります。回転した各divに含まれるコンテンツは、そのコンテナdivと一斉に回転する必要があります。それが可能なら、どうですか？

私はそれをGoogleで検索し、CSS3でものを回転させる例を発見し、私は、HTML5変換が、見てきたきたイムではないと私は仕事に任意の例を見つけることができない前に、私は、この洗練されたものを見てきてくださいオフ。だから私は少し実際には何らかの理由で可能ではないことに心配しています。また、私はこれを実現するためにjavascriptのようなものを使うことにもオープンしています。

Answer 1

あなたはthisのような何かを行うことができます：

HTMLあなたはコンテナに現在のクラスを変更するにはいくつかの簡単なのJSを追加することができます

.container { 
    transition: transform 1s; 
    transform: rotate(0); 
    position: relative; 
} 

.container>div { 
    position: absolute; 
} 

.container.second { 
    transform: rotate(120deg); 
} 

.container.third { 
    transform: rotate(240deg); 
} 

.container .first { 
    bottom: 0; 
    right: 0; 
    transform: rotate(120deg); 
} 

.container .second { 
    left: 0; 
    right: 0; 
    transform: rotate(240deg); 
} 

<div class="container"> 
    <div class="first">First</div> 
    <div class="second">Second</div> 
    <div class="third">Third</div> 
</div> 

CSS。