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

Question

所以我是一个图形设计师,我被要求为客户的新网站开发一个概念.它是一个内容有限的微站点.我想出的想法是将网站的所有部分放在div上,然后在用户点击菜单链接时像轮子一样旋转它们.我需要知道的是:是否可以使用html5围绕中心枢轴点旋转包含正常内容的整个div？需要对旋转进行动画处理,每个旋转div中包含的内容需要与其容器div一致旋转.如果有可能,怎么样？

我用Google搜索并找到了用CSS3旋转东西的例子,我看到了html5转换,但我不确定我以前看过任何这种复杂的东西,我找不到任何可以解决的例子.所以我有点担心它实际上不可能出于某种原因.我也愿意使用类似javascript的东西来实现这一目标.

Answer 1

你可以这样做：

超文本标记语言

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