The end result is as follows




The first step is to prepare a “stage” for the 3D elements, because the page itself is flat and cannot show the 3D effect.

By setting the perspective distance, the area is transformed into a “3D stage” that can show the size of the near and far, and the 3D effect can be done inside.

<div class="container">
</div>Copy the code

.container {
  height: 500px;
  background: #eee;perspective: 500px; /* Set perspective distance */}Copy the code



The stage is set, the actors enter, and a box is added to the container to make a cube. Set the width and height to center stage, add a border to make it easier to see the position, and set the transform-style property, which allows the box’s children to be 3d transformed

<div class="container">
  <div class="box">
  </div>
</div>Copy the code

.box {
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid # 000;
  transform-style: preserve-3d;
}Copy the code



A cube has six sides. Add six divs to box to make its six sides.

The six faces are divided into a, B and C in pairs for easy description: A1 is the “front” nearest to us, A2 is the “back” farthest from a1, B1 is the left side, B2 is the right side, C1 is the top, C2 is the bottom (refer to the effect picture of the top of the article).

<div class="container">
  <div class="box">
    <div class="a1">a1</div> <! -- before --> <div class="a2">a2</div> <! --> <div class="b1">b1</div> <! -- left --> <div class="b2">b2</div> <! -- right --> <div class="c1">c1</div> <! --> <div class="c2">c2</div> <! </div> </div>Copy the code

Position all six sides in the center of the box, set the width and height, and center the text

.box div {  
  width: 200px;  
  height: 200px;
  position: absolute;
  text-align: center;
  line-height: 200px;
  font-size: 30px;
}Copy the code

At this point, the six planes essentially overlap where X-axis is 0, Y-axis is 0, and z-axis is also 0 (x and Y-axis are represented on the screen as left and right and up and down respectively, and z-axis represents visual distance from us).



Above we set the width and height of each face to 200px, which means the distance between the two opposite faces should be 200px.

Let’s start with surface A1 and move it 100px forward along the z axis, so it’s 100px closer to us, and give each surface a transparent color to see how it looks

.a1 {background: rgba(0, 0, 255, 0.5); transform: translateZ(100px); }Copy the code

Then move the A2 plane 100px back along the Z-axis, or 100px further away from us

.a2 {background: rgba(0, 0, 255, 0.5); transform: translateZ(-100px); }Copy the code

So the two sides that were already overlapping, one is 100px closer and one is 100px further apart, and the two sides are exactly 200px apart

You should also rotate the A2 180 degrees along the y axis, so that the side with the words is facing out

.a2 {background: rgba(0, 0, 255, 0.5); transform: translateZ(-100px) rotateY(180deg); }Copy the code

At this point, we can already see that the 3D effect has taken effect, because although the principle of large near and small far is 200px in length and width, the a1 side closer to us is one circle larger than the box’s border, while the A2 side far away is one circle smaller



Now set b1, which is the left side, and move it 100px to the left along the x axis, then rotate it -90 degrees along the y axis, turning the front of the letter to the left

.b1 {background: rgba(0, 255, 0, 0.5); transform: translateX(-100px) rotateY(-90deg); }Copy the code

In contrast, b2 is 100px to the right, rotated by plus 90 degrees

.b2 {background: rgba(0, 255, 0, 0.5); transform: translateX(100px) rotateY(90deg); }Copy the code



Go ahead and set c1, c1 is the top surface, so move 100px up the y axis and then rotate 90 degrees along the x axis

.c1 {background: rgba(255, 0, 0, 0.5); transform: translateY(-100px) rotateX(90deg); }Copy the code

In contrast, c2 is the bottom, moving 100px down the y axis and then rotating -90 degrees along the x axis

.c2 {background: rgba(255, 0, 0, 0.5); transform: translateY(100px) rotateX(-90deg); }Copy the code



At this point, the 3D cube is complete. In order to see the three-dimensional effect more obvious, add some changes

Go back to the.box style, remove the border, and then add a little bit of an Angle tilt

.box {
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg);
  /* border: 1px solid # 000; * /
  transform-style: preserve-3d;
}Copy the code



Finally add a rotating animation

.box {
  width: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg);
  /* border: 1px solid # 000; * /transform-style: preserve-3d; animation: run 5s linear; animation-iteration-count: infinite; } @keyframes run { 0% { transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg) rotateY(0); } 50% { transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg) rotateY(180deg); } 100% { transform: translate(-50%, -50%) rotateZ(10deg) rotateX(-30deg) rotateY(360deg); }}Copy the code