Implementation of CSS3 3D cool cube transformation animation

I love coding, it makes me happy!

Hello everyone, I am Counter. In this chapter, Weibo mainly uses some new features of CSS3.

Key frames are mainly used to make 3D graphics move, which involves some abstract ideas and three-dimensional imagination.

Let me show you the finished effect first. The code is not difficult, and each line of code is commented in detail. It is pure CSS, without JS. CSS3 is good.

The effect is as follows:

There are comments on each line, so I won't repeat them. The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D Rotation</title>
    <style>
        /* Set the depth of field for the outermost parent to give the elements inside a three-dimensional space, and set the width and height*/
        .wrapper {
            /* Depth of field 600 pixels */
            perspective: 500px;
            /* Set the margin distance to 100px on the top, adaptive on the left and right, and 0 on the bottom */
            margin: 100px auto 0;
            width: 200px;
            height: 200px;
            /* border: 1px solid black; */
        }
        
        .box {
            /* Set relative positioning so that child elements are positioned relative to themselves*/
            position: relative;
            /* Set the item to retain the 3D effect. If the element is not set, the 3D effect will not be displayed*/
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            /* move is the key frame set, movement for 8 seconds, uniform motion, infinite times (the meaning of each parameter) */
            animation: move 8s linear infinite;
        }

        /* Select all elements that start with item and position them all to the location of their parent*/
        div[class^="item"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            /* Align the text left and right */
            text-align: center;
            /* Align the text vertically */
            line-height: 200px;
        }

        /* The cube has six sides, each item1~6 represents each side, and item1~6 inside has three axes, x, y, z */
        /* The x-axis is the width of your computer screen, from left to right. The y-axis is the axis of the height of your computer screen, from top to bottom. The z-axis is the axis from your eyes looking vertically at the computer screen, and the direction is from the computer screen to your eyes*/
        /* Set the first side */
        .item1 {  
            /* Move 100px along the z-axis towards your eye */
            transform: translateZ(100px);
            /* Set the background color, the last parameter is the transparency set to 0.6 */
            background-color: rgba(255, 0, 0, 0.6);
        }
        /* Set up the second side */
        .item2 {
            /* Moving 100px inward along the z-axis is -100px */
            transform: translateZ(-100px);
            background-color: rgba(72, 42, 245, 0.6);
        }
        /* Set the third side */
        .item3 {
            /* Rotate 90 degrees along the x-axis, then move 100px along the z-axis (deg here means degree) */
            transform: rotateX(90deg) translateZ(100px);
            background-color: rgba(217, 230, 36, 0.6);
        }
        /* Set the fourth side */
        .item4 {
            /* Rotate 90 degrees along the x-axis, then move -100px along the z-axis */
            transform: rotateX(90deg) translateZ(-100px);
            background-color: rgba(58, 7, 51, 0.6);
        }
        /* Set the fifth side */
        .item5 {
            /* Rotate 90 degrees along the y-axis, then move -100px along the z-axis */
            transform: rotateY(90deg) translateZ(-100px);
            background-color: rgba(241, 142, 75, 0.6);
        }
        /* Set the sixth side */
        .item6 {
            /* Rotate 90 degrees along the y-axis, then move 100px along the z-axis */
            transform: rotateY(90deg) translateZ(100px);
            background-color: rgba(125, 178, 238, 0.6);
        }

        /* Set keyframes to rotate the box container, rotating 360 degrees from 0 along the x, y, and z axes respectively*/
        @keyframes move {
            0% {
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            100% {
                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box">
            <div class="item1">1</div>
            <div class="item2">2</div>
            <div class="item3">3</div>
            <div class="item4">4</div>
            <div class="item5">5</div>
            <div class="item6">6</div>
        </div>
    </div>
</body>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: Data URI and MHTML complete solution for all browsers

>>: Analysis and solution of the problem that MySQL instance cannot be started