Galaxy Animation

ankushsingh
Jan 13, 2026 2
Live Preview

Live Editor

<div class="g-container">
<div class="g-group">
<div class="item item-right">
</div>
<div class="item item-left">
</div>
<div class="item item-top">
</div>
<div class="item item-bottom">
</div>
<div class="item item-middle">
</div>
</div>
<div class="g-group">
<div class="item item-right">
</div>
<div class="item item-left">
</div>
<div class="item item-top">
</div>
<div class="item item-bottom">
</div>
<div class="item item-middle">
</div>
</div>
</div>
html, body {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: #000;
	display: flex;
	
}
.g-container {
	margin: auto;
	perspective: 4px;
	perspective-origin: 50% 50%;
	position: relative;
	animation: hueRotate 21s infinite linear;
	
}
.g-group {
	position: absolute;
	width: 1000px;
	height: 1000px;
	left: -500px;
	top: -500px;
	transform-style: preserve-3d;
	animation: move 12s infinite linear;
	
}
.g-group:nth-child(2) {
	animation: move 12s infinite linear;
	animation-delay: -6s;
	
}
.item {
	position: absolute;
	width: 100%;
	height: 100%;
	/* background: url(https://cdn.pixabay.com/photo/2016/09/08/20/52/stars-1655504_1280.jpg);
	*/ background: url(https://z3.ax1x.com/2021/08/20/fLwuMd.jpg);
	background-size: cover;
	opacity: 1;
	animation: fade 12s infinite linear;
	animation-delay: 0;
	
}
.g-group:nth-child(2) .item {
	animation-delay: -6s;
	
}
.item-right {
	transform: rotateY(90deg) translateZ(500px);
	
}
.item-left {
	transform: rotateY(-90deg) translateZ(500px);
	
}
.item-top {
	transform: rotateX(90deg) translateZ(500px);
	
}
.item-bottom {
	transform: rotateX(-90deg) translateZ(500px);
	
}
.item-middle {
	transform: rotateX(180deg) translateZ(1000px);
	
}
@keyframes move {
	0% {
	transform: translateZ(-500px) rotate(0deg);
	
}
100% {
	transform: translateZ(500px) rotate(0deg);
	
}

}
@keyframes fade {
	0% {
	opacity: 0;
	
}
25%, 60% {
	opacity: 1;
	
}
100% {
	opacity: 0;
	
}

}
@keyframes hueRotate {
	0% {
	filter: hue-rotate(0);
	
}
100% {
	filter: hue-rotate(360deg);
	
}

}
Categories

Galaxy Animation

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
