CSS3 ile Dönen Animasyonlu 3D Küp Yapımı

Bu yazıda size CSS3 geçişleriyle nasıl küp çizileceğini öğreteceğim. Küpü anahtar kare animasyonu ve JavaScript ile döndürebileceğiz . Aşağıdaki örnekteki gibi bir görünüm olacak.

HTML Kodu

<div id="wrapD3Cube">
	<div id="D3Cube">
		<div id="side1"></div>
		<div id="side2"></div>
		<div id="side3"></div>
		<div id="side4"></div>
		<div id="side5"></div>
		<div id="side6"></div>
	</div>
</div>

<p><a href="https://html-online.com/articles/css3-cube/">CSS3 Cube</a></p>

CSS Kodu

#wrapD3Cube {
    width: 250px;
    height: 213px;
    margin: 20px auto;
}
#D3Cube {
    width: 112px;
    height: 112px;
    top: 50px;
    transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -moz-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    -webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
    margin: auto;
    position: relative;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-animation: cubeRotation 5s infinite; /* Safari 4.0 - 8.0 */
    animation: cubeRotation 5s infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes cubeRotation {
    0%   {	-webkit-transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);	}
    50%   {	-webkit-transform: rotateX(-22deg) rotateY(-128deg) rotateZ(0deg);	}
    100%   {	-webkit-transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);	}
}
/* Standard syntax */
@keyframes cubeRotation {
    0%   {	transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);	}
    50%   {	transform: rotateX(-22deg) rotateY(-238deg) rotateZ(0deg);	}
    100%   {	transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg);	}
}
#D3Cube > div {
    position: absolute;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    width: 112px;
    height: 112px;
    float: left;
    overflow: hidden;
	opacity: 0.85;
}
#side1 {
    transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #FFF;
}
#side2 {
    transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #ffaf1c;
}
#side3 {
    transform: translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: translateX(0px) translateY(0px) translateZ(56px);
	background-color: #58d568;
}
#side4 {
    transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #ed3030;
}
#side5 {
    transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #1c5ffe;
}
#side6 {
    transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -moz-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
    -webkit-transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(56px);
	background-color: #f2f215;
}

EKRAN ÇIKTISI

See the Pen rNOmoeV by onder (@onderh) on CodePen.