Geek asks and answers

Rotate content around center point in html5

So, Im a graphic desinger, and I was asked to develop a concept for a new client site. Its a micro site with a limited amount of content. The idea I came up with is to put all the sections of the site in a div and then rotate them like a wheel when the user clicks the menu link. What I need to find out is: Is it possible to rotate all divs containing normal content around a central pivot point using HTML5? The rotation must be animated, the content contained in each rotated div must rotate in unison with its container div. If possible, how?

enter image description here

CSS3, html5, , - , . , - . - javascript, .

+5
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, .

+1

More articles:


All Articles