Post
Ask Question

Revolving Door 3D Animation Using CSS3 Only

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. The 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 door revolves continuously and automatically stops whenever the user moves the cursor 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 with a picture such as follows.

HTML

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 in 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 around 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 the width, height, position, and border that are the same in all doors, the important factors that we need to manage are 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 the Z-axes, a 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.

Frame

Edit Jsbin

Twitter

Microsoft

Word

Gmail

Stackover

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


Similar Articles