5

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

ここに画像の説明を入力

私はそれをグーグルで検索し、CSS3 を使用してローテーションする例を見つけました。html5 の変換を見たことがありますが、これまでにこれほど洗練されたものを見たことがあるかどうかはわかりませんし、うまくいく例も見つかりません。ですから、何らかの理由で実際には可能ではないことを少し心配しています。また、これを実現するために JavaScript などを使用することにもオープンです。

4

1 に答える 1

2

あなたはこのようなことをすることができます：

HTML

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

CSS

.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);
}

いくつかの単純なjsを追加して、コンテナーの現在のクラスを変更できます。

于 2012-06-24T19:45:02.070 に答える