css3 3D Rubik's Cube animation (novice version)-HTML Tutorial-php.cn

css3 3D Rubik's Cube animation (novice version)

WBOY

Release： 2016-09-28 08:38:24

Original

1640 people have browsed it

.box{
    animation: cube_animation ease-in-out 6s infinite forwards;  
    transform-style: preserve-3d;
    transform-origin: 90px 90px 90px;
}
.bside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatex(-90px) translatez(90px) rotatey(90deg);
}
.cside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(90px) translatey(90px) rotatex(90deg);
}
.eside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(90px) translatey(-90px) rotatex(90deg);
}

Copy after login

Share here the 3D Rubik’s Cube animation, which can be completed with html5+CSS3 ~ No pictures, no truth, here are the renderings first

The first step is very simple, which is to draw the structure of the Rubik's Cube. Everyone has played with the Rubik's Cube and knows that the Rubik's Cube is a cube with six sides. Here we first write a large div (class name box) as a container, which contains 6 faces of the Rubik's Cube, that is, 6 divs, and then I divide each face into 9 small divs, which are 9 small grids. The code is as follows, just take a look

        <!-- 魔方六面 -->
        <div class="box">
            <div class="aside"> <!--魔方第一个面，类名aside-->
                <div></div>　　<!--第一个面里的每一个小格子-->
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            ...<!--魔方另外五个面代码和第一个面一样，此处省略-->
        </div>

Copy after login

The second step, with the structure of the Rubik's Cube, we start to color the Rubik's Cube. Let’s look at the code directly, it’s simple and crude~

<span style="color: #000000;">.aside{
    width: 180px;　　　　　　
    height: 180px;　　　　　　/* 这里定义每个面长宽都是180px */
    position: absolute;　　  /* 设置绝对定位，方便后面控制每个面的位置*/
    transform: translatez(0px);　　/*对这个面进行位置的移动*/
}
.aside div{
    width: 54px;　　　
    height: 54px;　　　　
    border-radius: 4px;　　/*设置圆角才能看到格子与格子间的小孔*/
    float: left;　　
    border: 3px solid #000;　　<span style="color: #000000;">/* 这里定义每个格子的边框是3px 所以一个格子总的长宽是54+3+3=60px 一行3个格子60*3=180px 一列同理 */</span>
    background: green;　　/*上色*/
}</span>

Copy after login

The third step, we have been drawing a Rubik's Cube for so long, you put the file in the browser and took a look, and found that there is not even a shadow of the Rubik's Cube? Not urgent. We first need to add transform-style: preserve-3d; on the parent container. This code is very critical, so that the child elements of this element look like a 3D effect. The default is a flat effect (2D), (for details, please see https: //developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style)

Okay, after adding this code, we need to start moving the 6 faces so that they look like a cube when combined. Moving 6 faces is nothing more than the following lines of code

<span style="color: #000000;">/*向X轴正方向平移80px长度、向Y轴负方向平移80PX、向Z轴正方向平移90px*/
transform: translatex(80px)  translatey(-80px) translatez(90px);
/*向X轴顺时针转动30度（℃）、向Y轴顺时针转动45度、向Z轴逆时针转动90度*/
transform:rotatex(30deg) rotatey(45deg) rotatez(-90deg);</span>

Copy after login

What? Are you saying the browser is incompatible? Just add the corresponding prefix yourself, which will not be discussed in detail here. Chestnut (-webkit-transform:rotatex(30deg);)

Open the browser F12 and slowly debug the angle you want. I paste my own code here for reference only~

.box{
    animation: cube_animation ease-in-out 6s infinite forwards;  /*魔方动画设置*/
    transform-style: preserve-3d;　　/*3d渲染*/
    transform-origin: 90px 90px 90px;
}
/*魔方动画效果*/<br />@keyframes cube_animation{<br />    from,to{}<br />    16%{<br />        transform: rotatey(-90deg);<br />    }<br />    33%{<br />        transform: rotatey(-90deg) rotatez(135deg);<br />    }<br />    50%{<br />        transform: rotatey(225deg) rotatez(135deg);<br />    }<br />    66%{<br />        transform: rotatey(135deg) rotatex(135deg);<br />    }<br />    83%{<br />        transform: rotatex(135deg);<br />    }<br />}
/*魔方六面*/
.aside{
    width: 180px;
    height: 180px;
    position: absolute;

}

.bside{
    width: 180px;
    height: 180px;
    position: absolute;<br />　　/*魔方的B面，先向左平移90px,再靠近人脸90px,最后y轴顺时针90度*/
    transform: translatex(-90px) translatez(90px) rotatey(90deg);
}

.cside{
    width: 180px;
    height: 180px;
    position: absolute;<br />
    transform: translatez(90px) translatey(90px) rotatex(90deg);
}

.dside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(180px);
}

.eside{
    width: 180px;
    height: 180px;
    position: absolute;
    transform: translatez(90px) translatey(-90px) rotatex(90deg);
}

Copy after login

Even if you do this, you still can’t see the full picture of the Rubik’s Cube.

Okay, let’s zoom in and add perspective:1000px;perspective-origin:25% 75%;

in the parent container

Then slowly debug the values in the browser F12 to see what changes~ Finally, there is an animation effect. I have posted the code above. I will write another blog about the specific animation principle another day~ Thank you for reading this. ending~