Home > Article > Web Front-end > 3D cube rotation animation

3D cube rotation animation

高洛峰Original: 2017-02-28 13:59:432392browse

This article introduces an attractive example of HTML5+CSS3: 3D cube rotation animation example, the details are as follows

Rendering:

Knowledge points:

1. Review of perspective and transform

2. CSS3 backgroud realizes the grid background, that is, the small grid on the surface

3. @-webkit-keyframes implement animation

HTML:

<body>  
 <p class="stage">  
    <p class="cube">  
        <p class="font"></p>  
        <p class="back"></p>  
        <p class="left"></p>  
        <p class="right"></p>  
        <p class="top"></p>  
        <p class="bottom"></p>  
    </p>  
  </p>   
</body>

We have already mentioned how to make it in the previous 3D product display It's a cube, and there are numbers on it. Theoretically, it's more complicated than this, although it's not that cool~ I won't go into details here.

CSS:

html  
       {  
           background: -webkit-radial-gradient(center, ellipse, #430d6d 0%, #000000 100%);  
           background: radial-gradient(ellipse at center, #430d6d 0%, #000000 100%);  
           height: 100%;  
       }  
  
       .stage  
       {  
           -webkit-perspective: 1000px;  
           width: 20em;  
           height: 20em;  
           left: 50%;  
           top: 50%;  
           margin-left: -10em;  
           margin-top: -10em;  
           position: absolute;  
       }  
  
       .cube  
       {  
           position: absolute;  
           width: 100%;  
           height: 100%;  
           -webkit-transform-style: preserve-3d;  
           -webkit-transform: rotateX(-20deg) rotateY(-20deg);  
       }  
  
       .cube *  
       {  
           background: -webkit-linear-gradient(left, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px), -webkit-linear-gradient(top, rgba(54, 226, 248, 0.5) 0px, rgba(54, 226, 248, 0.5) 3px, rgba(0, 0, 0, 0) 0px);  
           -webkit-background-size: 2.5em 2.5em;  
  
           background-color: rgba(0, 0, 0, 0.5);  
           position: absolute;  
           width: 100%;  
           height: 100%;  
           border: 2px solid rgba(54, 226, 248, 0.5);  
           -webkit-box-shadow: 0 0 5em rgba(0, 128, 0, 0.4);  
  
       }  
  
       .font  
       {  
           -webkit-transform: translateZ(10em);  
       }  
  
       .back  
       {  
           -webkit-transform: rotateX(180deg) translateZ(10em);  
       }  
  
       .left  
       {  
           -webkit-transform: rotateY(-90deg) translateZ(10em);  
       }  
  
       .right  
       {  
           -webkit-transform: rotateY(90deg) translateZ(10em);  
       }  
  
       .top  
       {  
           -webkit-transform: rotateX(90deg) translateZ(10em);  
       }  
  
       .bottom  
       {  
           -webkit-transform: rotateX(-90deg) translateZ(10em);  
       }

Similarly: stage serves as the stage, cube sets the effect of the child element to 3d, and then each face is rotated and Set translateZ and then form a cube.

Set the backgroud for each surface and set the code for small grids:

background: -webkit-linear-gradient(  
           left,  
           rgba(54, 226, 248, 0.5) 0px,  
           rgba(54, 226, 248, 0.5) 3px,  
           rgba(0, 0, 0, 0) 0px),  
                   -webkit-linear-gradient(  
           top,  
           rgba(54, 226, 248, 0.5) 0px,  
           rgba(54, 226, 248, 0.5) 3px,  
           rgba(0, 0, 0, 0) 0px);  
  
       -webkit-background-size: 2.5em 2.5em;

Background settings, 3 pixel strips from left to right , a 3-pixel strip from top to bottom; then set the background size to 2.5em 2.5em, and then repeat the background, the effect is as follows (I added a border):

3D cube rotation animation

Now the complete effect:

3D cube rotation animation

You can see that the cube has been formed, and finally add animation. Don’t think the animation is complicated, it is actually very simple~

Define an animation frame:

@-webkit-keyframes spin  
       {  
           from  
           {  
               -webkit-transform: translateZ(-10em) rotateX(0) rotateY(0deg);  
               transform: translateZ(-10em) rotateX(0) rotateY(0deg);  
           }  
  
           to  
           {  
               -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);  
               transform: translateZ(-10em) rotateX(360deg) rotateY(360deg);  
           }  
       }

The name is spin, at the beginning translateZ(-10em) rotateX(0) rotateY(0deg); at the end: translateZ(-10em) rotateX(360deg) rotateY(360deg); That is, rotate 360 degrees around the x and y axes at the same time.

Finally add this animation attribute to our cube:

.cube  
      {  
          -webkit-animation: 6s spin linear infinite;  
          position: absolute;  
          width: 100%;  
          height: 100%;  
          -webkit-transform-style: preserve-3d;  
          -webkit-transform: rotateX(-20deg) rotateY(-20deg);  
      }

Set the time to animation time 6s, animation spin, and speed to uniform linear , infinite loop infinite;

For more detailed parameter settings, you can refer to w3cSchool~In the future, I will also write a separate blog introducing the properties of CSS3~

Okay, the final effect has been completed ~

There is a slight difference in the appearance of the original website:

Because it adds an additional radial gradient to each face, then we add:

.cube *:before  
    {  
        display: block;  
        background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);  
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 128, 0, 0.2) 100%);  
        content: &#39;&#39;;  
        height: 100%;  
        width: 100%;  
        position: absolute;  
    }

Use the before pseudo-element, and then set the radial gradient~~Now it is finally consistent~

Click to download the source code: demo

The above is I hope that the entire content of this article will be helpful to everyone's learning, and I also hope that everyone will support the PHP Chinese website.

For more articles related to 3D cube rotation animation, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Canvas simulates the implementation of electronic lottery scratch ticketsNext article：Canvas simulates the implementation of electronic lottery scratch tickets

See more

3D cube rotation animation

Related articles