This is the 21st day of my participation in Gwen Challenge

This article mainly introduces the use of CSS3 3D effect to make cube, this article through the example code effect diagram to show you very detailed, for everyone’s work or study has a certain reference value, need friends can refer to.

Learning to make a cube with CSS3 3D effects will help us to enhance our understanding of the rotation and displacement properties of 3D scenes. The motion picture below is made with 3D rotation and displacement combined with animation effects. Interested students can add various animation effects on the basis of completing the cube.

Entering the theme, the following is the process of making a cube using 3D multiple transformations. Before that, it should be understood that the X, Y and Z coordinate axes of each surface in a cube are expanded from the center point of each surface, that is to say, a surface should be used as the reference axis for 3D transformation of a surface. If we want to transform the cube as a whole, we need to find the original position of the parent element. In the figure above, it is the purple transparent plane.

1. Cube is made up of 6 faces by rotation, so we need to build 6 faces first and set their attribute values and 3D attributes. Here, I use the combination of UL and Li to build it, and of course, other block elements can also be used to build it.

CSS styles

* {margin:0;padding: 0; }li{list-style: none; }html.body{height: 100%; }body{perspective: auto; }/* Set 3D depth of field */
   .box1{
    width:200px;
    height:200px;
    position: absolute;
    left: 0;right: 0;top: 0;bottom: 0;margin: auto;/* Place ul in the center of the screen */
    background: rgba(244.4.253.0.3);/* Give ul a purple transparent background */
    transform-style:preserve-3d;/* Define ul as 3D attribute */
    animation: box 10s 0.3 s linear infinite;
    }
   li{
    width: 200px;
    height: 200px;
    position: absolute;left: 0;top: 0;/* The six Li's overlap each other in the middle of the screen */
    font:50px/200px Microsoft Yahei;
    color: white;
    text-align: center;
    } 
   ul{
   transform: rotateY(20deg) rotateX(20deg); /* Rotate ul to a certain Angle */html. <ul class="box1">
    <li> before < /li>
    <li> after < /li>
    <li> l < /li>
    <li> right < /li>
    <li> < /li>
    <li> next < /li>  
</ul>  
Copy the code

The figure above is the overlapping effect of the six Li characters, which is also the initial position of Li. We will carry out 3D transformation on this basis.

2. In order to facilitate the 3D transformation of the whole cube, the initial position of UL (parent element) is used as the starting point of transformation. It should be noted that: transform: translateZ(-100px) rotateY(180deg); And the transform: rotateY (180 deg) translateZ (100 px); The effect of both is not the same, according to the actual situation of the appropriate transformation.

Add the following code to the CSS code above:

           li:nth-child(1) {background: #ff0;
    transform: translateZ(100px);
   }
   li:nth-child(2) {background: # 330;
    transform: translateZ(-100px) rotateY(180deg);
   }
   li:nth-child(3) {background: #f00;
    transform: translateX(-100px) rotateY(-90deg);
   }
   li:nth-child(4) {background: #0f0;
    transform: translateX(100px) rotateY(90deg);
   }
   li:nth-child(5) {background: #0ff;
    transform: translateY(-100px) rotateX(90deg);
   }
   li:nth-child(6) {background: #00f;
    transform: translateY(100px) rotateX(-90deg);
   }
Copy the code

Li: nth-Child (3) translatey: rotateY(-90deg) translateZ(100px); Li: Nth-Child (3) orientation changes after rotation. The left side of the cube changes from the original X axis to the Z axis.

The above is a way to make CSS3 cube effect, can also add hover (suspension), animation (animation), transtion (transition) and other effects in the code, increase the interest of the code. As long as you understand the use of 3D multiple transformation, you can also use a variety of methods to achieve the cube effect.