Write a Rotating Cube Block with css3

Write a Rotating Cube with css3 Animation + html

Write a three-dimensional rotating cube by using the properties of css3's rotating translation 3D and so on.

First we write the structure of a cube, six faces of a cube, so we write six div s.

Then write out the initial style to set the size of the box, and use the elastic box to center to the middle of the page.

Next, put them together with location attributes

Give the parent element a 3D transform-style: preserve-3d;

<!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>Stereo square box</title>
    <style>
        html{
            height:100%;
        }
        body{
            height:100%;
            margin:0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .box{
            width:100px;
            height:100px;
            position: relative;
            transform-style: preserve-3d;
        }
        .whole{
            width:100px;
            height:100px;
            border:1px solid #ddd;
            position: absolute;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="whole top"></div>
        <div class="whole bottom"></div>
        <div class="whole left"></div>
        <div class="whole right"></div>
        <div class="whole front"></div>
        <div class="whole behind"></div>
    </div>
</body>
</html>

Next, set the six sides of the box.

Assemble a cube by rotating translation
That's what happens when you don't move.

Add the rotation attribute and you will find transform: rotatex(45deg) rotatey(45deg);

Finally, add the rotation animation to complete it.

Final code

<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>Stereo square box</title>
    <style>
        html{
            height:100%;
        }
        body{
            height:100%;
            margin:0;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-style: preserve-3d;
        }
        .box{
            width:100px;
            height:100px;
            position: relative;
            transform-style: preserve-3d;
            animation:rotate 5s linear infinite;
        }
        
        .whole{
            width:100px;
            height:100px;
            border:1px solid #757575;
            opacity: 0.6;
            position: absolute;
            top:0;
            left:0;
        }
        @keyframes rotate{
        from{
         transform: rotateX(0deg) rotateY(0deg);
        }
        to{
            transform: rotateX(360deg) rotateY(720deg);
        }

    }
        .top {
            background:darkmagenta;
            /* Imagine the axis of rotation pointing to itself, clockwise positive */
            transform: rotateX(90deg) translateZ(50px);
        }

        .bottom {
            background:yellow;
            transform: rotateX(-90deg) translateZ(50px);
        }

        .left {
            background:cyan;
            transform: rotateY(-90deg) translateZ(50px);
        }

        .right {
            background:chartreuse;
            transform: rotateY(90deg) translateZ(50px);
        }

        .behind {
            background:chocolate;
            /* Position control using translation */
            transform: translateZ(-50px) rotateX(180deg);
        }

        .front {
            background:red;
            transform: translateZ(50px) rotateX(180deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="whole top"></div>
        <div class="whole bottom"></div>
        <div class="whole left"></div>
        <div class="whole right"></div>
        <div class="whole front"></div>
        <div class="whole behind"></div>
    </div>
</body>
</html>

Tags: css3 IE Attribute

Posted on Tue, 08 Oct 2019 13:44:09 -0700 by ssailer