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

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.

CSS3 3D Cube

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.

11 Beğen

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir