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=&.........完整代码请登录后点击上方下载按钮下载查看