Obrót treści wokół centralnej osi w html5

Question

Tak więc jestem graficznym desingererem i poproszono mnie o opracowanie koncepcji nowej witryny klienta. Jest to mikro-witryna z ograniczoną ilością treści. Pomysł, który wymyśliłem, to umieszczenie wszystkich sekcji witryny na elementach div, a następnie obrócenie ich jak koła, gdy użytkownik kliknie link menu. Muszę się dowiedzieć, czy jest możliwe obrócenie całych elementów div zawierających normalną zawartość wokół centralnego punktu obrotu za pomocą html5? Rotacja musi być animowana, zawartość zawarta w każdym obróconym elemencie div musi obracać się zgodnie z działem div kontenera. Jeśli to możliwe, w jaki sposób?

Mam googled go i znaleźć przykłady obracanie rzeczy z CSS3 i widziałem transformacje HTML5, ale im nie pewny ja nie widziałem czegoś tak skomplikowanego przed i nie mogę znaleźć żadnych przykładów pracować poza. Więc jestem trochę zaniepokojony, że nie jest to możliwe z jakiegoś powodu. Jestem również otwarty na użycie czegoś takiego jak javascript, aby tak się stało.

Answer 1

Można zrobić coś jak 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); 
} 

Możesz dodać kilka prostych js aby zmienić pojemnik aktualną klasę.