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 回答