在html5中圍繞一箇中心軸旋轉內容

Question

所以我是一個圖形設計師，我被要求爲客戶的新網站開發一個概念。它是一個內容有限的微站點。我想到的想法是將網站的所有部分放在div上，然後在用戶單擊菜單鏈接時將它們像輪子一樣旋轉。我需要找出的是這樣的：是否有可能使用html5圍繞中心軸旋轉包含普通內容的整個div？旋轉需要動畫，每個旋轉div中包含的內容需要與其容器div一起旋轉。如果可能的話，怎麼樣？

我GOOGLE了一下，發現與CSS3旋轉的東西的例子，我已經看到了HTML5的轉換，但林不知道我看到什麼這個複雜的前，我無法找到任何實例工作關閉。所以我有點擔心它由於某種原因實際上不可能。我也打開使用像JavaScript這樣的事情發生。

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來改變容器當前類。