CSS3 3D-Zauberwürfel-Animation (Einsteigerversion)-HTML-Tutorial-php.cn

CSS3 3D-Zauberwürfel-Animation (Einsteigerversion)

WBOY

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

Original

1639 Leute haben es durchsucht

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

Nach dem Login kopieren

Teilen Sie hier die 3D-Zauberwürfel-Animation, sie kann mit HTML5 CSS3 vervollständigt werden~ Kein Bild, keine Wahrheit, zuerst das Rendering

Der erste Schritt ist sehr einfach, nämlich die Struktur des Zauberwürfels zu zeichnen. Jeder hat schon einmal mit dem Zauberwürfel gespielt und weiß, dass der Zauberwürfel ein Würfel mit sechs Seiten ist. Hier schreiben wir zunächst ein großes Div (Klassennamenfeld) als Container, das 6 Seiten des Zauberwürfels enthält, also 6 Divs, und dann teile ich jede Seite in 9 kleine Divs, die 9 kleine Gitter sind. Der Code lautet wie folgt, schauen Sie sich einfach um

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

Nach dem Login kopieren

Im zweiten Schritt, mit der Struktur des Zauberwürfels, beginnen wir mit dem Färben des Zauberwürfels. Schauen wir uns den Code direkt an, er ist einfach und grob ~

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

Nach dem Login kopieren

Der dritte Schritt: Wir haben so lange einen Zauberwürfel gezeichnet, Sie haben die Datei in den Browser gelegt, einen Blick darauf geworfen und festgestellt, dass vom Zauberwürfel nicht einmal ein Schatten zu sehen ist? Keine Eile. Wir müssen zuerst transform-style: Preserve-3d; zum übergeordneten Container hinzufügen. Dieser Code ist wichtig ，让该元素的子元素看起来变成3D效果，默认是平面效果（2D），(具体请看https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style)

Okay, nachdem wir diesen Code hinzugefügt haben, müssen wir damit beginnen, die 6 Flächen so zu verschieben, dass sie zusammen wie ein Würfel aussehen. Das Verschieben von 6 Gesichtern ist nichts weiter als die folgenden Codezeilen

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

Nach dem Login kopieren

Was? Wollen Sie damit sagen, dass der Browser nicht kompatibel ist? Fügen Sie einfach selbst das entsprechende Präfix hinzu, worauf hier nicht näher eingegangen wird. Kastanie (-webkit-transform:rotatex(30deg);)

Öffnen Sie den Browser F12 und debuggen Sie langsam den gewünschten Winkel. Ich füge meinen eigenen Code hier nur als Referenz ein~

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

Nach dem Login kopieren

Selbst wenn Sie dies tun, können Sie den Zauberwürfel immer noch nicht vollständig sehen.

Okay, lass uns hineinzoomen und perspective:1000px;perspective-origin:25% 75%;

im übergeordneten Container hinzufügen

Dann debuggen Sie langsam die Werte im Browser F12, um zu sehen, was sich ändert. ~ Schließlich gibt es einen Animationseffekt. Ich werde an einem anderen Tag einen weiteren Blog über das spezifische Animationsprinzip schreiben Ihnen, dass Sie das gelesen haben. Ende~