Using CSS3's 3D effects to create a cube

Learning to use CSS3's 3D effects to create a cube will help enhance our understanding of the rotation and displacement properties of 3D scenes. The dynamic image below is made using 3D rotation displacement combined with animation effects. Interested students can explore adding various animation effects after completing the production of the cube.

Let's get into the topic. Here is the process of making a cube using 3D multiple transformations.
What you need to understand before this is that the x, y, and z coordinate axes of each face in the cube are developed based on the center point of each face. In other words, to perform a 3D transformation on a certain face, you must use that face as the coordinate axis reference. If you want to transform the entire cube, you need to find the original position of the parent element, which is the purple transparent plane in the picture above.

1. A cube is made up of 6 faces that are rotated, so we first need to construct the 6 faces and set their attribute values ​​and 3D properties. Here I use a combination of ul and li to construct it, but you can also use other block elements to construct 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;/*Make 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 the style of ul as 3D attribute*/
    animation: box 10s 0.3s linear infinite;
    }
   li{
    width: 200px;
    height: 200px;
    position: absolute;left: 0;top: 0;/*Make the 6 li overlap each other in the center of the screen*/
    font:50px/200px "Microsoft YaHei";
    color: white;
    text-align: center;
    } 
   ul{
   transform: rotateY(20deg) rotateX(20deg);/*Let ul rotate a certain angle to facilitate observation of the transformation effects of each surface*/
   }
html...............
<ul class="box1">
    <li>Before</li>
    <li>After</li>
    <li>Left</li>
    <li>Right</li>
    <li>Top</li>
    <li>Next</li>  
</ul> 

The picture above shows the effect of the texts overlapping each other among the 6 li. It is also the initial position of li. We will perform 3D transformation based on this.

2. In order to facilitate the 3D transformation of the entire cube, we generally take the initial position of ul (parent element) as the starting point of the transformation. It should be noted that transform: translateZ(-100px) rotateY(180deg); and transform: rotateY (180deg) translateZ(-100px); have different effects. Appropriate transformations should be made according to actual conditions.

Add the following code below 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);
   }

In the above code, the method of displacement first and rotation is used. You can also use the method of rotation first and then displacement for li: li:nth-child(3) changes, and the left side of the cube changes from the original X axis direction to the Z axis direction.

The above is one way to create a cube effect with CSS3. You can also add hover, animation, transition and other effects to the code to make the code more interesting. As long as you understand how to use 3D multiple transformations, you can use a variety of methods to achieve the cube effect.

Summarize

This is the end of this article about how to create a cube with CSS3 3D effects. For more relevant CSS3 3D cube content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!