Implementation of CSS3 3D cool Cube Transformation animation

Time:2020-2-23

I love rolling, rolling makes me happy!

Hello, I’m counter. In this chapter, Weibo mainly uses some new features of CSS3,

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

First, I’ll show you the effect of the completion. The code is not very difficult. Every line of code has been commented in detail. It’s pure CSS, without JS. CSS3 is good.

The effect is as follows:

Each line basically has a comment, so I won’t repeat it. The code is as follows:

<!DOCTYPE html>
<html lang="zh">
<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, so that the elements inside have three-dimensional space, and set the width and height*/
        .wrapper {
            /*Depth of field 600 pixels*/
            perspective: 500px;
            /*Set the margin distance to 100px above, left and right adaption, 0 below*/
            margin: 100px auto 0;
            width: 200px;
            height: 200px;
            /* border: 1px solid black; */
        }
        
        .box {
            /*Set relative positioning so that the child elements are positioned relative to themselves*/
            position: relative;
            /*Keep the 3D effect for item settings. If you don't set the elements inside, the 3D effect will not be displayed*/
            transform-style: preserve-3d;
            width: 200px;
            height: 200px;
            /*Move is the set key frame, moving for 8 seconds, moving at a constant speed, infinite times (meaning represented by each parameter)*/
            animation: move 8s linear infinite;
        }

        /*Select all elements with item at the beginning to locate the parent*/
        div[class^="item"] {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            /*Align text left and right*/
            text-align: center;
            /*Align text up and down*/
            line-height: 200px;
        }

        /*The cube has six sides, and each Item1 ~ 6 represents each side. At this time, Item1 ~ 6 in the cube has three axes, x, y, Z*/
        /*The X axis is the axis of the screen width of your computer, from left to right. The Y axis is the axis of the screen height of your computer, from top to bottom. The Z axis is the axis that your eyes look at the computer screen vertically, from the computer screen to your eyes*/
        /*Set first side*/
        .item1 {  
            /*Move 100 PX in the direction of your eyes along the Z axis*/
            transform: translateZ(100px);
            /*Set the background color, the last parameter is transparency set to 0.6*/
            background-color: rgba(255, 0, 0, 0.6);
        }
        /*Set second side*/
        .item2 {
            /*Moving 100px in the Z axis is - 100px*/
            transform: translateZ(-100px);
            background-color: rgba(72, 42, 245, 0.6);
        }
        /*Set third side*/
        .item3 {
            /*Rotate 90 degrees along the x-axis, and then move 100 PX to the z-axis*/
            transform: rotateX(90deg) translateZ(100px);
            background-color: rgba(217, 230, 36, 0.6);
        }
        /*Set fourth side*/
        .item4 {
            /*Rotate 90 degrees along the x-axis, then move - 100px to 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 to 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 and move 100 PX toward the z-axis*/
            transform: rotateY(90deg) translateZ(100px);
            background-color: rgba(125, 178, 238, 0.6);
        }

        /*Keyframe the box container to rotate 360 degrees from 0 along the X, y, and Z axes*/
        @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 whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.