CSS3 3D 루빅스 큐브 애니메이션(초보 버전)

.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);
}

html5+CSS3로 완성할 수 있는 3D 루빅큐브 애니메이션을 여기서 공유하세요~ 그림도 없고 진실도 없습니다. 렌더링 먼저 보여드리겠습니다

첫 번째 단계는 매우 간단합니다. 루빅스 큐브의 구조를 그리는 것입니다. 모두가 루빅스 큐브를 가지고 놀았으며 루빅스 큐브가 6개의 면을 가진 큐브라는 것을 알고 있습니다. 여기서는 먼저 루빅스 큐브의 6개 면, 즉 6개의 div를 포함하는 컨테이너로 큰 div(클래스 이름 상자)를 작성한 다음 각 면을 9개의 작은 격자인 9개의 작은 div로 나눕니다. 코드는 다음과 같습니다.

        <!-- 魔方六面 -->
        <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>

두 번째 단계에서는 루빅큐브의 구조에 맞춰 루빅큐브에 색칠을 시작합니다. 코드를 직접 보면 간단하고 투박해요~

<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>

세 번째 단계, 우리는 오랫동안 루빅큐브를 그려왔는데, 파일을 브라우저에 넣고 살펴보니 루빅큐브의 그림자조차 하나도 없다는 걸 발견하셨나요? 서두르지 마세요. 먼저 상위 컨테이너에 변환 스타일: 보존-3d를 추가해야 합니다. ，让该元素的子元素看起来变成3D效果，默认是平面效果（2D），(具体请看https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style)

좋습니다. 이 코드를 추가한 후 결합 시 큐브처럼 보이도록 6개의 면을 움직여야 합니다. 6개의 얼굴을 이동하는 것은 다음 코드 줄에 지나지 않습니다

<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>

뭐? 브라우저가 호환되지 않는다는 말씀이신가요? 해당 접두사를 직접 추가하면 됩니다. 여기서는 자세히 설명하지 않습니다. 밤나무(-webkit-transform:rotatex(30deg);)

브라우저 F12를 열고 원하는 각도를 천천히 디버그하세요. 제 코드는 참고용으로 여기에 올려두었습니다~

.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);
}

이렇게 해도 루빅큐브의 전체 모습을 볼 수는 없습니다.

좋아요. 확대하여 상위 컨테이너에spective:1000px;perspective-origin:25% 75%;

를 추가해 보겠습니다.

그런 다음 브라우저 F12에서 값을 천천히 디버그하여 어떤 변화가 있는지 살펴보세요~ 마지막으로 애니메이션 효과가 있습니다. 구체적인 애니메이션 원리에 대해서는 나중에 다른 블로그에 작성하겠습니다~ 감사합니다. 이 글을 읽어주셔서 감사합니다. 끝~