Introduction
In this article we will create a revolving door animation using CSS3 and HTML 5. We will not use any JavaScript throughout this article. Revolving door is a 3D effect that consists of six flaps or doors fixed to a center poll and all doors revolve round it. This doors revolves continuously and automatically stops whenever the user moves the curser over the door. The doors can be used for presenting any content in it. In this article I'm using these doors to link my various web profiles. So let's start coding it.
Revolving Door HTML
The HTML consists of a "camera" div that is our frame of reference and we don't need to bother about it much. The only thing to remember is that the entire animation must be enclosed in this frame.
The next important part of the animation consists of a poll. The poll is a center div around that all the doors will revolve. This poll is to be placed on the Z axes in such a way that all doors get enough space to revolve.
Another important part is the door. A door consists of a rectangular div. All rectangles have their own center of rotation and are placed at an angle of 60 degrees with each other. The reason for 60 degrees is that, the total angle in one complete revolution is 360 degrees and it consists of six doors. so the angle made by one door is:
Angle between two doors = 360/6 => 60degree
All the content is placed inside the door div to show it as "on door" content.
Let's see the HTML for the preceding analysis:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="camera">
<div id="poll">
<div id="face1">
<a href="https://www.facebook.com/">
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQjaVnNXN6CnjlL8Njlet7qpkoVOT5NvE0KKyEjZ6-HgSxIqFUVSg" width="200" height="200" />
</a>
</div>
<div id="face2">
<a href=""><img src="http://icons.iconarchive.com/icons/fasticon/web-2/256/Twitter-icon.png" width="200" height="200" ></a>
</div>
<div id="face3">
<a href=""><img
src="http://t3.gstatic.com/images?q=tbn:ANd9GcS8m0tLMxzpN-5Vt0WTDg9JXz6l5pTcRnIbcIu9OZ5XCDChChEYzQ" alt="Share on Google+" width="200" height="200"/></a>
</div>
<div id="face4">
<a href="codewithlogic.wordpress.com" ><img
src="http://recruitmentbuzz.co.uk/recruitment/wp-content/uploads/2013/06/r85.jpg" width=200 height=200 /> </a>
</div>
<div id="face5">
<a href="http://www.c-sharpcorner.com/authors/4aac15/arpit-jain.aspx" ><img
src="http://www.c-sharpcorner.com/UploadFile/AuthorImage/4aac15.jpg" width=200 height=200 /> </a>
</div>
<div id="face6">
<a href="http://stackoverflow.com/users/637679/arpit" >
<img src="http://www.skrenta.com/images/stackoverflow.jpg" width="200" height="200" /> </a>
</div>
</div>
</div>
</body>
</html>
The preceding HTML will provide us a picture such as follows:
![]()
Now to make the preceding output as a revolving door we need to use the power of CSS3.
Revolving Door CSS3
The CSS is as follows. The complete explanation of the code is given after this snippet.
@-webkit-keyframes auto{
0% {-webkit-transform:rotateY(0deg);}
100% {-webkit-transform:rotateY(360deg);}
}
@-moz-keyframes auto{
0% {-webkit-transform:rotateY(0deg);}
100% {-webkit-transform:rotateY(360deg);}
}
@-o-keyframes auto{
0% {-webkit-transform:rotateY(0deg);}
100% {-webkit-transform:rotateY(360deg);}
}
#camera{
-webkit-perspective:1000px;
}
#poll{
position:absolute;
margin-left:400px;
margin-top:100px;
height:200px;
width:1px;
-webkit-transform:translateZ(100px);
-webkit-transform-style:preserve-3d;
border:2px solid black;
-webkit-animation:auto 20s;
-webkit-animation-iteration-count:infinite;
}
#poll:hover{
-webkit-animation-play-state:paused;
}
#face1{
position:absolute;
height:200px;
width:200px;
border:1px solid green;
}
#face2{
position:absolute;
border:1px solid red;
height:200px;
width:200px;
-webkit-transform:translateZ(90px) translateX(-151px) rotateY(60deg);
}
#face3{
position:absolute;
border:1px solid blue;
height:200px;
width:200px;
-webkit-transform-origin:left;
-webkit-transform:rotateY(120deg);
}
#face4{
position:absolute;
border:1px solid orange;
height:200px;
width:200px;
-webkit-transform-origin:left;
-webkit-transform:rotateY(180deg);
}
#face5{
position:absolute;
border:1px solid black;
height:200px;
width:200px;
-webkit-transform-origin:left;
-webkit-transform:rotateY(60deg);
}
#face6{
position:absolute;
border:1px solid orange;
height:200px;
width:200px;
-webkit-transform-origin:left;
-webkit-transform:rotateY(300deg);
}
Don't be concerned about the length of the code. Once you get the logic it will be a cake walk for you to write this. Our first task in CSS is to provide the proper depth to our frame of reference and make it ready for a 3D view. This is done in the "#camera" selector by setting the perspective depth to 1000px.
The next step in CSS is to place the poll at its correct position. By correct position I mean giving the proper space around the poll for doors to revolve. This is done by giving a margin of 400px. To provide the space on the Z-axes, the poll is translated 100px forward (optional). To preserve the 3D nature of the animation we have set the transform style to "preserve-3d".
To revolve this poll and our doors we have applied an animation to this poll. The keyframe animation of CSS3 revolves this poll from 0 degrees to 360 degrees in 20 seconds. All the doors revolve aroung this poll since they are attached to the poll.
Upon hovering over this poll or door we are stopping the animation by changing the animation play state so that the user can choose the proper option.
Next we need to design the doors. In the doors we need to set a uniform width and height for all six doors. Apart from width, height, position and border that are same in all doors, the important factor that we need to manage is the transformations to apply and the origin of the transformation.
The first door needs no transformations since it's a reference for the other doors.
Door 2 requires a translation of 90px on Z-axes, translation of -151px on the X-axes and a rotation of 60 degrees around the Y-axes.
Door 3 requires an origin transform on its left edge and then a revolution of 120 degrees on the Y-axes.
Door 4 requires an origin transform on the left edge and the rotation of 180 degrees on Y-axes.
Similarly for door 5 and door 6. While doing all this we will get the following series of images.
![]()
Summary
That's all for this article. I hope you have enjoyed reading this article. We have successfully created a revolving door animation. The CSS looks a bit lengthy because of different browser specific prefixes but it is easy to understand. In case of any doubt feel free to ask in the comments.
LIVE DEMO