Поворот содержимого вокруг центральной точки в html5

Question

Итак, я графический desinger, и меня попросили разработать концепцию для нового сайта клиента. Его микро-сайт с ограниченным количеством контента. Идея, которую я придумал, состоит в том, чтобы поместить все разделы сайта в div и затем повернуть их, как колесо, когда пользователь нажимает ссылку меню. Что мне нужно, чтобы выяснить это: Можно ли повернуть все див, содержащие нормальное содержание вокруг центральной точки поворота с помощью HTML5? Ротация должна быть анимирована, содержимое, содержащееся в каждом повернутом div, должно вращаться в унисон с его контейнером div. Если это возможно, то как?

Я гугле его и нашел примеры вращающихся вещи с 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 для изменения контейнеру текущего класса.