在HTML5中围绕中心轴旋转内容

Question

所以我是一名平面设计师，被要求为客户的新网站开发概念。这是一个内容非常有限的微型网站。我的想法是将网站的所有部分放在div上，然后像旋转轮盘一样旋转它们，当用户点击菜单链接时。我需要找出的是：是否可以使用html5围绕中心枢轴点旋转包含正常内容的整个div？旋转需要动画，每个旋转的div中包含的内容需要与其容器div同步旋转。如果可能，请问如何实现？

我已经在谷歌上搜索了一下，找到了使用CSS3旋转的例子，也看过了HTML5变换，但我不确定我之前有没有见过这么复杂的东西，并且我找不到任何可参考的示例。所以我有点担心由于某种原因实际上无法实现。我也可以使用JavaScript来实现这一点。

- Thomas

---

请查看这里的示例 - http://www.webkit.org/blog/138/css-animation - Ryan

Answer 1

你可以像这样做：this。

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来更改容器当前类。

- jasssonpet

---

那么，使用这样的东西，每个容器div中包含的所有内容也会旋转吗？ - Thomas

是的，整个元素将会旋转。 - Bruno