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;
	--depth: 10;
}
.cuboid:nth-child(41) {
	--translaZ: -10vmin;
}
.cuboid:nth-child(42) {
	--translaZ: 10vmin;
}



/* ROW 15 */
.cuboid:nth-child(1n+43) {
	--translaY: -70vmin;
	--depth: 30;
	--width: 10;
}
.cuboid:nth-child(44) {
	--translaX: -10vmin;
}
.cuboid:nth-child(45) {
	--translaX: 10vmin;
}



/* ROW 16 */
.cuboid:nth-child(1n+46) {
	--translaY: -75vmin;
	--width: 30;
	--depth: 10;
}
.cuboid:nth-child(47) {
	--translaZ: -10vmin;
}
.cuboid:nth-child(48) {
	--translaZ: 10vmin;
}






/* ROW 17 */
.cuboid:nth-child(1n+49) {
	--translaY: -80vmin;
	--depth: 30;
	--width: 10;
}
.cuboid:nth-child(50) {
	--translaX: -10vmin;
}
.cuboid:nth-child(51) {
	--translaX: 10vmin;
}



/* ROW 18 */
.cuboid:nth-child(1n+52) {
	--translaY: -85vmin;
	--width: 30;
	--depth: 10;
}
.cuboid:nth-child(53) {
	--translaZ: -10vmin;
}
.cuboid:nth-child(54) {
	--translaZ: 10vmin;
}




input {
	display: none;
}
label {
	cursor: pointer;
	display: block;
	width: 100%;
	height: 100%;
}
label:hover {
	background: #fff8;
}

@property --translaZ {
	syntax: "<length>";
	inherits: false;
	initial-value: 0vmin;
}

@property --translaX {
	syntax: "<length>";
	inherits: false;
	initial-value: 0vmin;
}

#row1:checked ~ .content .cuboid:nth-child(1),
#row3:checked ~ .content .cuboid:nth-child(7),
#row5:checked ~ .content .cuboid:nth-child(13),
#row7:checked ~ .content .cuboid:nth-child(19),
#row9:checked ~ .content .cuboid:nth-child(25),
#row11:checked ~ .content .cuboid:nth-child(31),
#row13:checked ~ .content .cuboid:nth-child(37),
#row15:checked ~ .content .cuboid:nth-child(43),
#row17:checked ~ .content .cuboid:nth-child(49) {
	--translaZ: -30vmin;
}

#row2:checked ~ .content .cuboid:nth-child(4),
#row4:checked ~ .content .cuboid:nth-child(10),
#row6:checked ~ .content .cuboid:nth-child(16),
#row8:checked ~ .content .cuboid:nth-child(22),
#row10:checked ~ .content .cuboid:nth-child(28),
#row12:checked ~ .content .cuboid:nth-child(34),
#row14:checked ~ .content .cuboid:nth-child(40),
#row16:checked ~ .content .cuboid:nth-child(46),
#row18:checked ~ .content .cuboid:nth-child(52)  {
	--translaX: 30vmin;
}

.cam {
	position: absolute;
	width: 10vmin;
	height: 10vmin;
	background: #0002;
}

.top {
	top: 0;
}

.bot {
	bottom: 0;
}

.left {
	left: 0;
}

.right {
	right: 0;
}

.top:hover ~ .content {
	transform: rotateX(15deg) rotateY(45deg) scale3d(0.75,0.75,0.75);
}

.bot:hover ~ .content {
	transform: rotateX(-30deg) rotateY(45deg) scale3d(0.75,0.75,0.75);
}

.right:hover ~ .content {
	transform: rotateX(-15deg) rotateY(70deg) scale3d(0.75,0.75,0.75);
}

.left:hover ~ .content {
	transform: rotateX(-15deg) rotateY(20deg) scale3d(0.75,0.75,0.75);
}


.left-top {
	top: 0;
	left: 0;
}

.right-top {
	top: 0;
	right: 0;
}

.right-bot {
	right: 0;
	bottom: 0;
}

.left-bot {
	left: 0;
	bottom: 0;
}

.left-top:hover ~ .content {
	transform: rotateX(15deg) rotateY(20deg) scale3d(0.75,0.75,0.75);
}

.right-top:hover ~ .content {
	transform: rotateX(15deg) rotateY(70deg) scale3d(0.75,0.75,0.75);
}

.right-bot:hover ~ .content {
	transform: rotateX(-30deg) rotateY(70deg) scale3d(0.75,0.75,0.75);
}

.left-bot:hover ~ .content {
	transform: rotateX(-30deg) rotateY(20deg) scale3d(0.75,0.75,0.75);
}

.cam:after {
	content: "";
	position: absolute;
	width: 2vmin;
	height: 2vmin;
	border: 1vmin solid #fff;
	border-color: #fff #fff #fff0 #fff0;
	border-width: 1vmin 1vmin 0 0;
	border-radius: 0.25vmin;
	transform: rotate(-90deg);
	left: 4vmin;
	top: 3.5vmin;
	opacity: 0.15;
}

.cam.top:after {
	transform: rotate(-45deg);
	left: calc(50% - 1.5vmin);
}

.cam.right-top:after {
	transform: rotate(0deg);
	right: 4vmin;
	left: inherit;
}

.cam.right:after {
	transform: rotate(45deg);
	top: calc(50% - 1.5vmin);
	right: 4vmin;
	left: inherit;
}

.cam.right-bot:after {
	transform: rotate(90deg);
	top: calc(100% - 6vmin);
	right: 4vmin;
	left: inherit;
}

.cam.bot::after {
	transform: rotate(135deg);
	left: calc(50% - 1.5vmin);
	top: calc(100% - 6vmin);
}

.cam.left-bot::after {
	transform: rotate(-180deg);
	top: calc(100% - 6vmin);
}

.cam.left:after {
	transform: rotate(-135deg);
	top: calc(50% - 1.5vmin);
}

.cam:hover {
	background: #fff2;
}

.cam:hover:after {
	opacity: 0.75;
}
</style>

  
</head>

<body translate="no">
  <div class="cam top"></div>
<div class="cam right-top"></div>
<div class="cam right"></div>
<div class="cam right-bot"></div>
<div class="cam bot"></div>
<div class="cam left-bot"></div>
<div class="cam left"></div>
<div class="cam left-top"></div>
<input type="checkbox" id="row1"/>
<input type="checkbox" id="row2"/>
<input type="checkbox" id="row3"/>
<input type="checkbox" id="row4"/>
<input type="checkbox" id="row5"/>
<input type="checkbox" id="row6"/>
<input type="checkbox" id="row7"/>
<input type="checkbox" id="row8"/>
<input type="checkbox" id="row9"/>
<input type="checkbox" id="row10"/>
<input type="checkbox" id="row11"/>
<input type="checkbox" id="row12"/>
<input type="checkbox" id="row13"/>
<input type="checkbox" id="row14"/>
<input type="checkbox" id="row15"/>
<input type="checkbox" id="row16"/>
<input type="checkbox" id="row17"/>
<input type="checkbox" id="row18"/>
<div class="content">
  <div class="cuboid">
    <div class="side">
      <label for="row1"></label>
    </div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side">
      <label for="row1"></label>
    </div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side">
      <label for="row2"></label>
    </div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side">
      <label for="row2"></label>
    </div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side">
      <label for="row3"></label>
    </div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side">
      <label for="row3"></label>
    </div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side">
      <label for="row4"></label>
    </div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side">
      <label for="row4"></label>
    </div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
    <div class="side"></div>
  </div>
  <div class="cuboid">
    <div class="side">
      <label for="row5"></label>
    </div>
    <div class="side"></div>
    <div class="side"></div>.........完整代码请登录后点击上方下载按钮下载查看