CSS：一个会旋转的魔方

最新推荐文章于 2025-05-30 02:38:28 发布

DerAimon

最新推荐文章于 2025-05-30 02:38:28 发布

阅读量225

点赞数 3

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/Demmoi/article/details/144825415

版权

CSS 专栏收录该内容

4 篇文章

订阅专栏

实现效果如图：

要实现这样一个旋转的魔方体主要用到以下三个CSS：position、transform、animation，其余就是保持耐心慢慢调试出具有一定观赏性的动画效果。

HTML结构：

<div class="magic-square">
 <div class="cube df inset n-a-1 purple"></div>
 <div class="cube df inset n-a-2 purple"></div>
 <div class="cube df inset n-a-3 purple"></div>
 <div class="cube df inset n-b-1 purple"></div>
 <div class="cube df inset n-b-2 purple"></div>
 <div class="cube df inset n-b-3 purple"></div>
 <div class="cube df inset n-b-4 purple"></div>
 <div class="cube df inset n-c-1 purple"></div>
 <div class="cube df inset n-c-2 purple"></div>
 <div class="cube df inset n-c-3 purple"></div>
 <div class="cube df inset n-c-4 purple"></div>
 <div class="cube df inset n-c-5 purple"></div>
 <div class="cube df inset n-d-1 purple"></div>
 <div class="cube df inset n-d-2 purple"></div>
 <div class="cube df inset n-d-3 purple"></div>
 <div class="cube df inset n-d-4 purple"></div>
 <div class="cube df inset n-e-1 purple"></div>
 <div class="cube df inset n-e-2 purple"></div>
 <div class="cube df inset n-e-3 purple"></div>
</div>

CSS：

:root {
	--purple: linear-gradient(90deg, rgba(109, 62, 211, 0.8) 0%, rgba(56, 59, 255, 0.3) 100%);
	--blue: linear-gradient(90deg, rgba(55, 123, 248, 0.8) 0%, rgba(51, 142, 211, 0.3) 100%);
	--cyan: linear-gradient(90deg, rgba(53, 242, 245, 0.8) 0%, rgba(46, 219, 222, 0.3) 100%);
	--green: linear-gradient(90deg, rgba(80, 255, 109, 0.8) 0%, rgba(83, 222, 130, 0.3) 100%);
	--cyanBlue: linear-gradient(45deg, rgba(44, 255, 255, 0.8) 0%, rgba(42, 134, 255, 0.7) 100%);
	--black: linear-gradient(45deg, rgba(39, 26, 68, 0.9) 0%, rgba(48, 30, 90, 0.7) 100%);
}

.magic-square {
	position: absolute;
	left: 50%;
	top: 25%;
	margin-left: calc(-100vh * 233 / 1080);
	width: calc(100vh * 466 / 1080);
	height: calc(100vh * 464 / 1080);
}

.magic-square-box .cube {
	position: absolute;
	transform-style: preserve-3d;
	z-index: 2;
}


/* 定义魔方尺寸 */
.magic-square-box .cube.lg {
	--size: calc(100vh * 60 / 1080);
	width: calc(100vh * 60 / 1080);
	height: calc(100vh * 60 / 1080);
}

.magic-square-box .cube.df {
	--size: calc(100vh * 50 / 1080);
	width: calc(100vh * 50 / 1080);
	height: calc(100vh * 50 / 1080);
}

.magic-square-box .cube.sm {
	--size: calc(100vh * 40 / 1080);
	width: calc(100vh * 40 / 1080);
	height: calc(100vh * 40 / 1080);
}


/* 定义3D矩形 */
.cube .side {
	position: absolute;
	width: var(--size);
	height: var(--size);
	box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.8),
		0 0 10px 0 rgba(0, 0, 0, 0.1) inset;
	opacity: 0.8;
}

.cube .side.front {
	transform: translateZ(calc(var(--size) / 2));
}

.cube .side.back {
	transform: translateZ(calc(var(--size) / -2));
}

.cube .side.left {
	transform: translateX(calc(var(--size) / -2)) rotateY(90deg);
}

.cube .side.right {
	transform: translateX(calc(var(--size) / 2)) rotateY(90deg);
}

.cube .side.top {
	transform: translateY(calc(var(--size) / -2)) rotateX(90deg);
}

.cube .side.bottom {
	transform: translateY(calc(var(--size) / 2)) rotateX(90deg);
}

/* 定义每个面颜色 */
.purple .side.front,
.purple .side.back,
.purple .side.left,
.purple .side.right,
.purple .side.top,
.purple .side.bottom {
	background-image: var(--purple);
}

.blue .side.front,
.blue .side.back,
.blue .side.left,
.blue .side.right,
.blue .side.top,
.blue .side.bottom {
	background-image: var(--blue);
}

.cyan .side.front,
.cyan .side.back,
.cyan .side.left,
.cyan .side.right,
.cyan .side.top,
.cyan .side.bottom {
	background-image: var(--cyan);
}

.green .side.front,
.green .side.back,
.green .side.left,
.green .side.right,
.green .side.top,
.green .side.bottom {
	background-image: var(--green);
}

.cyanBlue .side.front,
.cyanBlue .side.back,
.cyanBlue .side.left,
.cyanBlue .side.right,
.cyanBlue .side.top,
.cyanBlue .side.bottom {
	background-image: var(--cyanBlue);
}

.black .side.front,
.black .side.back,
.black .side.left,
.black .side.right,
.black .side.top,
.black .side.bottom {
	background-image: var(--black);
}

.black .side {
	box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.2),
		0 0 30px 0 rgba(0, 0, 0, 0.1) inset;
}

/* 中间魔方 */
.cube.inset {
	--purple: linear-gradient(90deg, rgba(51, 108, 240, 0.8) 0%, rgba(42, 45, 194, 0.7) 100%);
	--aspect: translateX(-50%) translateY(-100%);
	transform: rotateX(-30deg) rotateZ(0deg) rotateY(45deg);
	/* animation: rotateCubeC 8s linear infinite; */
}

/* 定义3D矩形 */
.cube.inset .side {
	box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.8),
		0 0 5px 0 rgba(0, 0, 0, 0.1) inset;
	opacity: 1;
}

/* 中间魔方碎片定位 层级 */
.cube.n-a-1,
.cube.n-a-2,
.cube.n-a-3 {
	left: calc(50% - calc(var(--size) * 2) - calc(var(--size) / 2));
}

.cube.n-b-1,
.cube.n-b-2,
.cube.n-b-3,
.cube.n-b-4 {
	left: calc(50% - calc(var(--size) * 1.5));
}

.cube.n-c-1,
.cube.n-c-2,
.cube.n-c-3,
.cube.n-c-4,
.cube.n-c-5 {
	left: calc(50% - calc(var(--size) / 2));
}

.cube.n-d-1,
.cube.n-d-2,
.cube.n-d-3,
.cube.n-d-4 {
	left: calc(50% + calc(var(--size) / 2));
}

.cube.n-e-1,
.cube.n-e-2,
.cube.n-e-3,
.cube.n-e-4,
.cube.n-e-5 {
	left: calc(50% + calc(var(--size) * 1.5));
}

.cube.n-a-1,
.cube.n-e-1 {
	top: calc(-100vh * 5 / 1080);
	z-index: 3;
}

.cube.n-a-2,
.cube.n-e-2 {
	top: calc(100vh * 55 / 1080);
	z-index: 2;
}

.cube.n-a-3,
.cube.n-e-3 {
	top: calc(100vh * 120 / 1080);
	z-index: 1;
}

.cube.n-b-1,
.cube.n-d-1 {
	top: calc(-100vh * 30 / 1080);
	z-index: 3;
}

.cube.n-b-2,
.cube.n-d-2 {
	top: calc(100vh * 20 / 1080);
	z-index: 5;
}

.cube.n-b-3,
.cube.n-d-3 {
	top: calc(100vh * 80 / 1080);
	z-index: 3;
}

.cube.n-b-4,
.cube.n-d-4 {
	top: calc(100vh * 145 / 1080);
	z-index: 2;
}

.cube.n-a-1 {
	--purple: linear-gradient(-240deg, rgba(51, 179, 126, 0.8) 20%, rgba(42, 253, 176, 0.5) 100%);
	z-index: 4;
}

.cube.n-d-1 {
	z-index: 2;
}

.cube.n-d-3 {
	--purple: linear-gradient(-240deg, rgba(253, 93, 0, 0.7) 40%, rgba(232, 200, 17, 0.7) 100%);
}

.cube.n-c-1 {
	top: calc(-100vh * 55 / 1080);
}

.cube.n-c-2 {
	top: calc(-100vh * 5 / 1080);
	z-index: 3;
}

.cube.n-c-3 {
	--purple: linear-gradient(90deg, rgba(51, 108, 240, 0.3) 0%, rgba(42, 45, 194, 0.2) 100%);
	top: calc(100vh * 45 / 1080);
	z-index: 6;
}

.cube.n-c-4 {
	top: calc(100vh * 105 / 1080);
	z-index: 4;
}

.cube.n-c-5 {
	top: calc(100vh * 170 / 1080);
	z-index: 3;
}

.cube.n-c-3 .side {
	box-shadow: 0 0 2px 0 rgba(255, 255, 255, 0.4),
		0 0 5px 0 rgba(0, 0, 0, 0.1) inset;
}

.cube.inset.n-b-1,
.cube.inset.n-e-1 {
	--purple: linear-gradient(90deg, rgba(26, 57, 125, 0.8) 0%, rgba(27, 39, 108, 0.7) 100%);
}

.cube.n-b-1 .side,
.cube.n-e-1 .side {
	opacity: 0.4;
}

.cube.n-b-4 .side {
	opacity: 0.3;
}

.cube.n-e-1 .side.front {
	background-image: repeating-linear-gradient(-35deg, transparent 0px, transparent 7px, rgba(255, 255, 255, 0.7) 7px, rgba(255, 255, 255, 0.7) 9px);
}


/* 中间区域魔方动画 */

.cube.n-a-1 {
	--aspect: translateX(50%) translateY(100%);
	animation: insetMagicAni 20s linear 0.5s infinite;
}

.cube.n-a-2 {
	--aspect: translateX(-50%) translateY(0%);
	animation: insetMagicAni 20s linear 1.5s infinite reverse;
}

.cube.n-a-3 {
	--aspect: translateX(-100%) translateY(0%);
	animation: insetMagicAni 20s linear 1s infinite;
}

.cube.n-b-2 {
	--aspect: translateX(-100%) translateY(0%);
	animation: insetMagicAni 20s linear 2s infinite;
}

.cube.n-b-3 {
	--aspect: translateX(-100%) translateY(0%);
	animation: insetMagicAni 20s linear 0.7s infinite reverse;
}

.cube.n-c-1 {
	--aspect: translateX(50%) translateY(50%);
	animation: insetMagicAni 20s linear 1.6s infinite;
}

.cube.n-c-2 {
	animation: insetMagicAni 10s linear 2.2s infinite;
}

.cube.n-c-4 {
	--aspect: translateX(-100%) translateY(0%);
	animation: insetMagicAni 20s linear 1.3s infinite;
}

.cube.n-c-5 {
	animation: insetMagicAni 20s linear 2.2s infinite;
}

.cube.n-d-1 {
	--aspect: translateX(100%) translateY(50%);
	animation: insetMagicAni 10s linear 2.3s infinite;
}

.cube.n-d-4 {
	--aspect: translateX(-100%) translateY(0%);
	animation: insetMagicAni 20s linear 2s infinite;
}

.cube.n-e-2 {
	--aspect: translateX(50%) translateY(0%);
	--purple: linear-gradient(90deg, rgba(119, 60, 191, 0.9) 0%, rgba(56, 59, 255, 0.6) 100%);
	animation: insetMagicAni 20s linear 1s infinite;
}

.cube.n-e-3 {
	--aspect: translateX(-50%) translateY(50%);
	animation: insetMagicAni 20s linear 2.1s infinite;
}

@keyframes insetMagicAni {
	0% {
		transform: rotateX(-30deg) rotateZ(0deg) rotateY(45deg) translateX(0%) translateY(0%);
	}

	1% {
		transform: rotateX(-120deg) rotateZ(45deg) rotateY(0deg) translateX(0%) translateY(0%);
	}

	11% {
		transform: rotateX(-120deg) rotateZ(45deg) rotateY(0deg) translateX(0%) translateY(0%);
	}

	12% {
		transform: rotateX(-120deg) rotateZ(45deg) rotateY(0deg) var(--aspect);
	}

	22% {
		transform: rotateX(-120deg) rotateZ(45deg) rotateY(0deg) var(--aspect);
	}

	23% {
		transform: rotateX(-120deg) rotateZ(45deg) rotateY(0deg) translateX(0%) translateY(0%);
	}

	33% {
		transform: rotateX(-120deg) rotateZ(45deg) rotateY(0deg) translateX(0%) translateY(0%);
	}

	35% {
		transform: rotateX(-120deg) rotateZ(45deg) rotateY(180deg) translateX(0%) translateY(0%);
	}

	45% {
		transform: rotateX(-120deg) rotateZ(45deg) rotateY(180deg) translateX(0%) translateY(0%);
	}

	48% {
		transform: rotateX(-120deg) rotateZ(-45deg) rotateY(180deg) translateX(0%) translateY(0%);
	}

	80% {
		transform: rotateX(-120deg) rotateZ(-45deg) rotateY(180deg) translateX(0%) translateY(0%);
	}

	82% {
		transform: rotateX(-30deg) rotateZ(0deg) rotateY(45deg) translateX(0%) translateY(0%);
	}

	100% {
		transform: rotateX(-30deg) rotateZ(0deg) rotateY(45deg) translateX(0%) translateY(0%);
	}
}