div+css实现彩色三维搭积木效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：div+css实现彩色三维搭积木效果代码，四周按钮点击悬浮可旋转角度，积木中间方块可点击抽出。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
<style>
:root {
	--rotation: 0deg;
	--translaY: 0vmin;
	--translaX: 0vmin;
	--translaZ: 0vmin;
}

* {
	transform-style: preserve-3d;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 100vmin;
	background: radial-gradient(circle at 50% 50%, #333, #000);
	max-width: 90vmin;
	margin: 0 auto;
}

.content {
	width: 30vmin;
	height: 90vmin;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	transform: rotateX(-15deg) rotateY(45deg) scale3d(0.75,0.75,0.75);
	transition: all 0.5s ease 0s;
}

.cuboid {
	--height: 5;
	--width: 10;
	--depth: 30;
	--hue: 0;
	--sat: 60%;
	height: calc(var(--height) * 1vmin);
	width: calc(var(--width) * 1vmin);
	position: absolute;
	transform: translate3d(0vmin, 0vmin, 0vmin);
	transform: translateX(var(--translaX)) translateY(var(--translaY))
		translateZ(var(--translaZ)) rotateY(var(--rotation));
	transition: --translaZ 1.5s ease 0s, --translaX 1.5s ease 0s;
}

.cuboid .side {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	border-radius: 2px;
}

.cuboid .side:nth-of-type(1) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 60%);
}
.cuboid .side:nth-of-type(2) {
	transform: translate3d(-50%, -50%, calc(var(--depth) * -0.5vmin))
		rotateY(180deg);
	background: hsl(var(--hue), var(--sat), 25%);
}
.cuboid .side:nth-of-type(3) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(90deg)
		translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 75%);
}
.cuboid .side:nth-of-type(4) {
	width: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateY(-90deg)
		translate3d(0, 0, calc(var(--width) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 40%);
}
.cuboid .side:nth-of-type(5) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(90deg)
		translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 75%);
}
.cuboid .side:nth-of-type(6) {
	height: calc(var(--depth) * 1vmin);
	transform: translate(-50%, -50%) rotateX(-90deg)
		translate3d(0, 0, calc(var(--height) * 0.5vmin));
	background: hsl(var(--hue), var(--sat), 20%);
}

/*** colors ***/

.cuboid:nth-child(10n + 2) {
	--hue: 72;
}
.cuboid:nth-child(10n + 3) {
	--hue: 144;
}
.cuboid:nth-child(10n + 4) {
	--hue: 216;
}
.cuboid:nth-child(10n + 5) {
	--hue: 288;
}
.cuboid:nth-child(10n + 6) {
	--hue: 36;
}
.cuboid:nth-child(10n + 7) {
	--hue: 108;
}
.cuboid:nth-child(10n + 8) {
	--hue: 180;
}
.cuboid:nth-child(10n + 9) {
	--hue: 252;
}
.cuboid:nth-child(10n + 10) {
	--hue: 324;
}

/*** positions ***/

/* ROW 1 */
.cuboid:nth-child(2) {
	--translaX: -10vmin;
}

.cuboid:nth-child(3) {
	--translaX: 10vmin;
}

/* ROW 2 */
.cuboid:nth-child(1n + 4) {
	--translaY: -5vmin;
	--width: 30;
	--depth: 10;
}
.cuboid:nth-child(5) {
	--translaZ: -10vmin;
}
.cuboid:nth-child(6) {
	--translaZ: 10vmin;
}

/* ROW 3 */
.cuboid:nth-child(1n + 7) {
	--translaY: -10vmin;
	--depth: 30;
	--width: 10;
}
.cuboid:nth-child(8) {
	--translaX: -10vmin;
}
.cuboid:nth-child(9) {
	--translaX: 10vmin;
}

/* ROW 4 */
.cuboid:nth-child(1n + 10) {
	--translaY: -15vmin;
	--width: 30;
	--depth: 10;
}
.cuboid:nth-child(11) {
	--translaZ: -10vmin;
}
.cuboid:nth-child(12) {
	--translaZ: 10vmin;
}

/* ROW 5 */
.cuboid:nth-child(1n + 13) {
	--translaY: -20vmin;
	--depth: 30;
	--width: 10;
}
.cuboid:nth-child(14) {
	--translaX: -10vmin;
}
.cuboid:nth-child(15) {
	--translaX: 10vmin;
}

/* ROW 6 */
.cuboid:nth-child(1n + 16) {
	--translaY: -25vmin;
	--width: 30;
	--depth: 10;
}
.cuboid:nth-child(17) {
	--translaZ: -10vmin;
}
.cuboid:nth-child(18) {
	--translaZ: 10vmin;
}

/* ROW 7 */
.cuboid:nth-child(1n + 19) {
	--translaY: -30vmin;
	--depth: 30;
	--width: 10;
}
.cuboid:nth-child(20) {
	--translaX: -10vmin;
}
.cuboid:nth-child(21) {
	--translaX: 10vmin;
}

/* ROW 8 */
.cuboid:nth-child(1n + 22) {
	--translaY: -35vmin;
	--width: 30;
	--depth: 10;
}
.cuboid:nth-child(23) {
	--translaZ: -10vmin;
}
.cuboid:nth-child(24) {
	--translaZ: 10vmin;
}

/* ROW 9 */
.cuboid:nth-child(1n + 25) {
	--translaY: -40vmin;
	--depth: 30;
	--width: 10;
}
.cuboid:nth-child(26) {
	--translaX: -10vmin;
}
.cuboid:nth-child(27) {
	--translaX: 10vmin;
}

/* ROW 10 */
.cuboid:nth-child(1n + 28) {
	--translaY: -45vmin;
	--width: 30;
	--depth: 10;
}
.cuboid:nth-child(29) {
	--translaZ: -10vmin;
}
.cuboid:nth-child(30) {
	--translaZ: 10vmin;
}

/* ROW 11 */
.cuboid:nth-child(1n + 31) {
	--translaY: -50vmin;
	--depth: 30;
	--width: 10;
}
.cuboid:nth-child(32) {
	--translaX: -10vmin;
}
.cuboid:nth-child(33) {
	--translaX: 10vmin;
}

/* ROW 12 */
.cuboid:nth-child(1n + 34) {
	--translaY: -55vmin;
	--width: 30;
	--depth: 10;
}
.cuboid:nth-child(35) {
	--translaZ: -10vmin;
}
.cuboid:nth-child(36) {
	--translaZ: 10vmin;
}

/* ROW 13 */
.cuboid:nth-child(1n + 37) {
	--translaY: -60vmin;
	--depth: 30;
	--width: 10;
}
.cuboid:nth-child(38) {
	--translaX: -10vmin;
}
.cuboid:nth-child(39) {
	--translaX: 10vmin;
}

/* ROW 14 */
.cuboid:nth-child(1n + 40) {
	--translaY: -65vmin;
	--width: 30;
	--dept.........完整代码请登录后点击上方下载按钮下载查看