div+css布局实现三维房子模型效果
代码语言：html
所属分类：三维
代码描述：div+css布局实现三维房子模型效果
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/***********************/
/***********************/
/************************/
/* Mixin para crear cubo ( Caras siempre al frente ) */
/************************/
/***********************/
/***********************/
/**/
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
transform-style: preserve-3d;
-webkit-tap-highlight-color: transparent;
}
/* Generic */
body {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
overflow: hidden;
background-color: #C6C5E1;
cursor: pointer;
}
.face {
position: absolute;
}
/***************/
.house {
position: absolute;
width: 36vw;
height: 24vw;
transform: perspective(20000px) rotateX(75deg) rotateZ(35deg) translateZ(-9vw);
transition: transform .1s linear;
}
.shadows {
width: 100%;
height: 100%;
overflow: hidden;
}
.shadow-a {
position: absolute;
right: 0;
bottom: 0;
width: 130%;
height: 103%;
transform-origin: top right;
transform: skewY(-3deg);
background-color: #686688;
box-shadow: -1vw 1vw 1.5vw #686688;
filter: blur(0.5vw);
}
.shadow-b {
position: absolute;
top: 0;
width: 100%;
height: 101.5%;
background-color: #5f5d7c;
}
/***************/
/***************/
.al {
width: 3vw;
height: 24vw;
position: absolute;
left: 0;
top: 0;
}
.al__front {
width: 30vw;
height: 0.4vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(23.6vw);
}
.al__back {
width: 30vw;
height: 0.4vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-30vw) translateY(-0.4vw);
}
.al__right {
width: 24vw;
height: 0.4vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(30vw) translateX(-24vw) translateY(-0.4vw);
}
.al__left {
width: 24vw;
height: 0.4vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.4vw);
}
.al__top {
width: 30vw;
height: 24vw;
transform-origin: top left;
transform: translateZ(0.4vw);
}
.al__bottom {
width: 30vw;
height: 24vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-30vw);
}
.al__front {
background-image: linear-gradient(to right, #8985ad, #c4c2d6);
}
.al__back {
background-color: #c4c2d6;
}
.al__right {
background-color: #fbfbfb;
}
.al__left {
background-color: #7a76a3;
}
.al__top {
background-image: linear-gradient(to right, #a7a4c2 40%, #e5e5e5, #f2f2f2);
}
.al__top::before {
content: '';
position: absolute;
bottom: 0;
width: 13vw;
height: 7vw;
background-image: linear-gradient(-135deg, transparent 20%, rgba(169, 215, 207, 0.75));
}
.al__top::after {
content: '';
position: absolute;
bottom: 1vw;
left: 6vw;
width: 5vw;
height: 5vw;
border-radius: 50%;
background-image: radial-gradient(rgba(251, 251, 251, 0.25), transparent);
filter: blur(0.7vw);
}
.al__bottom {
background-color: #c4c2d6;
}
.ab {
width: 8vw;
height: 8vw;
position: absolute;
right: 0;
bottom: 0;
}
.ab__front {
width: 8vw;
height: 0.4vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(7.6vw);
}
.ab__back {
width: 8vw;
height: 0.4vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-8vw) translateY(-0.4vw);
}
.ab__right {
width: 8vw;
height: 0.4vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(8vw) translateX(-8vw) translateY(-0.4vw);
}
.ab__left {
width: 8vw;
height: 0.4vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.4vw);
}
.ab__top {
width: 8vw;
height: 8vw;
transform-origin: top left;
transform: translateZ(0.4vw);
}
.ab__bottom {
width: 8vw;
height: 8vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-8vw);
}
.ab__front {
background-color: #c4c2d6;
}
.ab__back {
background-color: #c4c2d6;
}
.ab__right {
background-color: #fbfbfb;
}
.ab__left {
background-color: #fbfbfb;
}
.ab__top {
background-color: #f2f2f2;
}
.ab__bottom {
background-color: #c4c2d6;
}
.at {
width: 8vw;
height: 4vw;
position: absolute;
right: 0;
top: 0;
}
.at__front {
width: 8vw;
height: 0.4vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(3.6vw);
}
.at__back {
width: 8vw;
height: 0.4vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-8vw) translateY(-0.4vw);
}
.at__right {
width: 4vw;
height: 0.4vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(8vw) translateX(-4vw) translateY(-0.4vw);
}
.at__left {
width: 4vw;
height: 0.4vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.4vw);
}
.at__top {
width: 8vw;
height: 4vw;
transform-origin: top left;
transform: translateZ(0.4vw);
}
.at__bottom {
width: 8vw;
height: 4vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-8vw);
}
.at__front {
background-color: #c4c2d6;
}
.at__back {
background-color: #c4c2d6;
}
.at__right {
background-color: #fbfbfb;
}
.at__left {
background-color: #fbfbfb;
}
.at__top {
background-color: #f2f2f2;
}
.at__bottom {
background-color: #c4c2d6;
}
.ac {
width: 6vw;
height: 12vw;
position: absolute;
right: 0;
top: 4vw;
}
.ac__front {
width: 6vw;
height: 1vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(11vw);
}
.ac__back {
width: 6vw;
height: 1vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-1vw);
}
.ac__right {
width: 12vw;
height: 1vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-12vw) translateY(-1vw);
}
.ac__left {
width: 12vw;
height: 1vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
}
.ac__top {
width: 6vw;
height: 12vw;
transform-origin: top left;
transform: translateZ(1vw);
}
.ac__bottom {
width: 6vw;
height: 12vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-6vw);
}
.ac .face {
opacity: .9;
}
.ac__front {
background-color: #4d6d98;
opacity: .75;
}
.ac__back {
background-color: #4d6d98;
}
.ac__right {
background-image: linear-gradient(to top, #6187be, #7095c9);
}
.ac__left {
background-color: #16273c;
}
.ac__top {
opacity: .75;
background-image: linear-gradient(to right, #7095c9 0, #7095c9 5%, #6187be 20%, #6187be 30%, #7095c9 40%, #7095c9 65%, #658dc5 70%, #658dc5 72%, #7095c9 85%);
box-shadow: inset 0.5vw 0.5vw 2vw rgba(251, 251, 251, 0.5);
}
.ac__top::before {
content: '';
position: absolute;
width: 40%;
height: 100%;
overflow: hidden;
background-image: linear-gradient(to bottom, transparent 0, transparent 10%, rgba(97, 135, 190, 0.9) 15%, rgba(97, 135, 190, 0.9) 40%, rgba(251, 251, 251, 0.2) 40%, rgba(251, 251, 251, 0.2) 50%, transparent 60%);
filter: blur(0.15vw);
}
.ac__bottom {
background-color: #4d6d98;
}
.ac__bottom::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
box-shadow: -0.25vw 0.25vw 1vw #234062;
}
/***************/
/***************/
.bce {
width: 17vw;
height: 20.5vw;
position: absolute;
right: 6vw;
top: 0;
transform: translateZ(0.41vw);
}
.bce__front {
width: 17vw;
height: 0.5vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(21.5vw);
}
.bce__back {
width: 17vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-17vw) translateY(-0.5vw);
}
.bce__right {
width: 22vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(17vw) translateX(-22vw) translateY(-0.5vw);
}
.bce__left {
width: 22vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.bce__top {
width: 17vw;
height: 22vw;
transform-origin: top left;
transform: translateZ(0.5vw);
}
.bce__bottom {
width: 17vw;
height: 22vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-17vw);
}
.bce__front {
background-image: linear-gradient(to right, #a7a4c2, #c4c2d6);
}
.bce__back {
background-color: #c4c2d6;
}
.bce__right {
background-color: #f2f2f2;
}
.bce__left {
background-color: #c4c2d6;
}
.bce__top {
background-image: linear-gradient(135deg, #a7a4c2 60%, #f2f2f2);
}
.bce__bottom {
background-color: #c4c2d6;
}
.bce__bottom::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 101%;
background-color: #675D6E;
filter: blur(0.35vw);
}
.bci {
width: 16vw;
height: 21vw;
position: absolute;
right: 6vw;
top: 0;
transform: translateZ(0.92vw);
}
.bci__front {
width: 16vw;
height: 0.5vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(20.5vw);
}
.bci__back {
width: 16vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-16vw) translateY(-0.5vw);
}
.bci__right {
width: 21vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(16vw) translateX(-21vw) translateY(-0.5vw);
}
.bci__left {
width: 21vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.bci__top {
width: 16vw;
height: 21vw;
transform-origin: top left;
transform: translateZ(0.5vw);
}
.bci__bottom {
width: 16vw;
height: 21vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-16vw);
}
.bci__front {
background-image: linear-gradient(to right, #a7a4c2, #c4c2d6);
}
.bci__back {
background-color: #c4c2d6;
}
.bci__right {
background-color: #f2f2f2;
}
.bci__left {
background-color: #c4c2d6;
}
.bci__top {
background-image: linear-gradient(135deg, #a7a4c2 60%, #f2f2f2);
}
.bci__top::before {
content: '';
position: absolute;
width: 100%;
height: 16.4vw;
background-color: #d7d6ea;
}
.bci__top::after {
content: '';
position: absolute;
bottom: 1.5vw;
left: 1vw;
width: 10vw;
height: 3.5vw;
border-radius: 50%;
background-image: radial-gradient(#badfd9, transparent);
filter: blur(0.5vw);
}
.bci__bottom {
background-color: #c4c2d6;
}
.bci__bottom::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 101%;
background-color: #675D6E;
filter: blur(0.35vw);
}
.bl {
width: 13vw;
height: 17vw;
position: absolute;
left: 0;
top: 0;
transform: translateZ(0.41vw);
}
.bl__front {
width: 13.1vw;
height: 0.5vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(16.5vw);
}
.bl__back {
width: 13.1vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-13.1vw) translateY(-0.5vw);
}
.bl__right {
width: 17vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(13.1vw) translateX(-17vw) translateY(-0.5vw);
}
.bl__left {
width: 17vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.bl__top {
width: 13.1vw;
height: 17vw;
transform-origin: top left;
transform: translateZ(0.5vw);
}
.bl__bottom {
width: 13.1vw;
height: 17vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-13.1vw);
}
.bl__front {
background-image: linear-gradient(to right, #6c6799, #a7a4c2);
}
.bl__back {
background-color: #c4c2d6;
}
.bl__right {
background-color: #f2f2f2;
}
.bl__left {
background-color: #fbfbfb;
}
.bl__top {
background-color: #d7d6ea;
}
.bl__top::before {
content: '';
position: absolute;
top: 2vw;
left: 3.5vw;
width: 12vw;
height: 12vw;
border-radius: 50%;
background-color: rgba(222, 245, 241, 0.35);
filter: blur(0.95vw);
}
.bl__bottom {
background-color: #c4c2d6;
}
.bl__bottom::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 102%;
background-color: #8985ad;
box-shadow: 0vw 0.25vw 1vw #8985ad;
}
.bt {
width: 4vw;
height: 4vw;
position: absolute;
right: 2vw;
top: 0;
transform: translateZ(0.41vw);
}
.bt__front {
width: 4vw;
height: 1.1vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(2.9vw);
}
.bt__back {
width: 4vw;
height: 1.1vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-1.1vw);
}
.bt__right {
width: 4vw;
height: 1.1vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-4vw) translateY(-1.1vw);
}
.bt__left {
width: 4vw;
height: 1.1vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1.1vw);
}
.bt__top {
width: 4vw;
height: 4vw;
transform-origin: top left;
transform: translateZ(1.1vw);
}
.bt__bottom {
width: 4vw;
height: 4vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-4vw);
}
.bt__front {
background-image: linear-gradient(to top, #9894b7 50%, #cac8da);
}
.bt__back {
background-color: #c4c2d6;
}
.bt__right {
background-color: #f2f2f2;
}
.bt__left {
background-color: #fbfbfb;
}
.bt__top {
background-color: #e5e5e5;
}
.bt__bottom {
background-color: #c4c2d6;
}
.bbe {
width: 6vw;
height: 6vw;
position: absolute;
right: 0;
bottom: 2vw;
transform: translateZ(0.41vw);
}
.bbe__front {
width: 6vw;
height: 0.5vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(5.5vw);
}
.bbe__back {
width: 6vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-0.5vw);
}
.bbe__right {
width: 6vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-6vw) translateY(-0.5vw);
}
.bbe__left {
width: 6vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.bbe__top {
width: 6vw;
height: 6vw;
transform-origin: top left;
transform: translateZ(0.5vw);
}
.bbe__bottom {
width: 6vw;
height: 6vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-6vw);
}
.bbe__front {
background-color: #c4c2d6;
}
.bbe__back {
background-color: #c4c2d6;
}
.bbe__right {
background-color: #f2f2f2;
}
.bbe__left {
background-color: #fbfbfb;
}
.bbe__top {
background-color: #f6f6f6;
}
.bbe__bottom {
background-color: #fbfbfb;
}
.bbe__bottom::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 95%;
height: 104%;
background-color: #675D6E;
filter: blur(0.35vw);
}
.bbi {
width: 4vw;
height: 5vw;
position: absolute;
right: 2vw;
bottom: 3vw;
transform: translateZ(0.92vw);
}
.bbi__front {
width: 4vw;
height: 0.5vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(4.5vw);
}
.bbi__back {
width: 4vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-4vw) translateY(-0.5vw);
}
.bbi__right {
width: 5vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(4vw) translateX(-5vw) translateY(-0.5vw);
}
.bbi__left {
width: 5vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-0.5vw);
}
.bbi__top {
width: 4vw;
height: 5vw;
transform-origin: top left;
transform: translateZ(0.5vw);
}
.bbi__bottom {
width: 4vw;
height: 5vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-4vw);
}
.bbi__front {
background-color: #c4c2d6;
}
.bbi__back {
background-color: #c4c2d6;
}
.bbi__right {
background-color: #f2f2f2;
}
.bbi__left {
background-color: #fbfbfb;
}
.bbi__top {
background-color: #ededed;
}
.bbi__bottom {
background-color: #fbfbfb;
}
.bbi__bottom::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 95%;
height: 104%;
background-color: #675D6E;
filter: blur(0.5vw);
}
/***************/
/***************/
.cl {
width: 5vw;
height: 3vw;
position: absolute;
left: 0;
top: 0;
transform: translateZ(0.41vw);
}
.cl__front {
width: 3.5vw;
height: 12vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(7vw);
}
.cl__back {
width: 3.5vw;
height: 12vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-3.5vw) translateY(-12vw);
}
.cl__right {
width: 19vw;
height: 12vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(3.5vw) translateX(-19vw) translateY(-12vw);
}
.cl__left {
width: 19vw;
height: 12vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-12vw);
}
.cl__top {
width: 3.5vw;
height: 19vw;
transform-origin: top left;
transform: translateZ(12vw);
}
.cl__bottom {
width: 3.5vw;
height: 19vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-3.5vw);
}
.cl__front {
display: flex;
justify-content: center;
background-image: linear-gradient(to bottom, #c4c2d6, #9894b7);
overflow: hidden;
}
.cl__front::after {
content: '';
position: absolute;
left: 0;
bottom: -1.1vw;
width: 200%;
height: 3vw;
background-image: linear-gradient(to right, rgba(222, 245, 241, 0.3), rgba(196, 194, 214, 0.25));
filter: blur(0.175vw);
transform: rotateZ(-30deg);
}
.cl__back {
background-color: #c4c2d6;
}
.cl__right {
background-image: linear-gradient(to top, #a7a4c2, #8985ad, #cbe7e3 70%);
}
.cl__right::before {
content: '';
position: absolute;
right: 0;
width: calc(100% - 2.5vw);
height: 100%;
background-image: linear-gradient(to bottom, #fbfbfb, #cbe7e3 15%, #d9d9d9 80%, #a7a4c2);
filter: blur(0.5vw);
}
.cl__right .lamp:nth-of-type(1) {
left: 25%;
}
.cl__right .lamp:nth-of-type(2) {
left: 50%;
}
.cl__right .lamp:nth-of-type(3) {
left: 75%;
}
.cl__left {
background-image: linear-gradient(to top, #8985ad, #6c6799);
}
.cl__top {
background-color: #b5b3cc;
}
.cl__bottom {
background-color: #c4c2d6;
}
.cl__bottom::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 115%;
height: 103%;
background-color: rgba(103, 93, 110, 0.75);
filter: blur(0.5vw);
}
.cc {
width: 1vw;
height: 19vw;
position: absolute;
left: 15vw;
top: 0;
transform: translateZ(12.5vw);
}
.cc__front {
width: 1vw;
height: 12.5vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(6.5vw);
}
.cc__back {
width: 1vw;
height: 12.5vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-12.5vw);
}
.cc__right {
width: 19vw;
height: 12.5vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-19vw) translateY(-12.5vw);
}
.cc__left {
width: 19vw;
height: 12.5vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-12.5vw);
}
.cc__top {
width: 1vw;
height: 19vw;
transform-origin: top left;
transform: translateZ(12.5vw);
}
.cc__bottom {
width: 1vw;
height: 19vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-1vw);
}
.cc__front {
background-image: linear-gradient(to bottom, #b5b3cc, #c4c2d6 10%);
}
.cc__back {
background-color: #c4c2d6;
}
.cc__right {
background-color: #fbfbfb;
}
.cc__left {
background-image: linear-gradient(to top, #8985ad, #6c6799);
}
.cc__top {
background-color: #f2f2f2;
}
.cc__bottom {
background-color: #c4c2d6;
}
.ccl {
width: 1vw;
height: 3vw;
position: absolute;
left: 15vw;
top: 16vw;
transform: translateZ(1.43vw);
}
.ccl__front {
width: 1vw;
height: 11.5vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-8.5vw);
}
.ccl__back {
width: 1vw;
height: 11.5vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-1vw) translateY(-11.5vw);
}
.ccl__right {
width: 3vw;
height: 11.5vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(1vw) translateX(-3vw) translateY(-11.5vw);
}
.ccl__left {
width: 3vw;
height: 11.5vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-11.5vw);
}
.ccl__top {
width: 1vw;
height: 3vw;
transform-origin: top left;
transform: translateZ(11.5vw);
}
.ccl__bottom {
width: 1vw;
height: 3vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-1vw);
}
.ccl__front {
background-image: linear-gradient(to top, #a7a4c2, #c4c2d6);
}
.ccl__back {
background-color: #c4c2d6;
}
.ccl__right {
background-image: linear-gradient(to bottom, #6c6799, #8985ad 70%, #badfd9);
}
.ccl__right::before {
content: '';
position: absolute;
top: -.5vw;
left: 0;
width: 100%;
height: 2vw;
transform-origin: bottom left;
transform: translateZ(0.05vw);
background-image: linear-gradient(-45deg, #8985ad, #6c6799 80%, transparent 80%);
}
.ccl__left {
background-image: linear-gradient(to top, #8985ad, #6c6799);
}
.ccl__top {
background-color: #f2f2f2;
}
.ccl__bottom {
background-color: #c4c2d6;
}
.ccl__bottom::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 102%;
height: 101%;
background-color: #675D6E;
filter: blur(0.35vw);
}
.cml {
width: 16vw;
height: 19vw;
position: absolute;
left: 0;
top: 0;
transform: translateZ(12.41vw);
}
.cml__front {
width: 16vw;
height: 1vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(18vw);
}
.cml__back {
width: 16vw;
height: 1vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-16vw) translateY(-1vw);
}
.cml__right {
width: 19vw;
height: 1vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(16vw) translateX(-19vw) translateY(-1vw);
}
.cml__left {
width: 19vw;
height: 1vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
}
.cml__top {
width: 16vw;
height: 19vw;
transform-origin: top left;
transform: translateZ(1vw);
}
.cml__bottom {
width: 16vw;
height: 19vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-16vw);
}
.cml__front {
background-image: linear-gradient(to bottom, #bbb9d0, #c4c2d6);
}
.cml__back {
background-color: #c4c2d6;
}
.cml__right {
background-color: #fbfbfb;
}
.cml__left {
background-color: #6c6799;
}
.cml__top {
background-image: linear-gradient(to right, #8985ad, #a7a4c2 30%, #97cfc6);
box-shadow: inset 0.3vw 0.3vw 2vw rgba(103, 93, 110, 0.1), inset -0.3vw 0.3vw 2vw rgba(103, 93, 110, 0.1), inset 0.3vw -0.3vw 2vw rgba(103, 93, 110, 0.1), inset -0.3vw -0.3vw 2vw rgba(103, 93, 110, 0.1);
}
.cml__bottom {
background-color: #c4c2d6;
}
.cmr {
width: 16vw;
height: 18vw;
position: absolute;
left: 16vw;
top: 0;
transform: translateZ(12.41vw);
}
.cmr__front {
width: 16vw;
height: 1vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(17vw);
}
.cmr__back {
width: 16vw;
height: 1vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-16vw) translateY(-1vw);
}
.cmr__right {
width: 18vw;
height: 1vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(16vw) translateX(-18vw) translateY(-1vw);
}
.cmr__left {
width: 18vw;
height: 1vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
}
.cmr__top {
width: 16vw;
height: 18vw;
transform-origin: top left;
transform: translateZ(1vw);
}
.cmr__bottom {
width: 16vw;
height: 18vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-16vw);
}
.cmr__front {
background-image: linear-gradient(to bottom, #b5b3cc, #c4c2d6);
}
.cmr__back {
background-color: #c4c2d6;
}
.cmr__right {
background-color: #fbfbfb;
}
.cmr__left {
background-color: #c4c2d6;
}
.cmr__top {
background-image: linear-gradient(to right, #f2f2f2, #ededed);
}
.cmr__top::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: linear-gradient(48.5deg, #f7f7f7 50%, transparent 50%);
opacity: .35;
}
.cmr__bottom {
background-color: #c4c2d6;
}
.cmt {
width: 12vw;
height: 19vw;
position: absolute;
left: 3vw;
top: 0;
transform: translateZ(24vw);
}
.cmt__front {
width: 12vw;
height: 1vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(18vw);
}
.cmt__back {
width: 12vw;
height: 1vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-12vw) translateY(-1vw);
}
.cmt__right {
width: 19vw;
height: 1vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(12vw) translateX(-19vw) translateY(-1vw);
}
.cmt__left {
width: 19vw;
height: 1vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-1vw);
}
.cmt__top {
width: 12vw;
height: 19vw;
transform-origin: top left;
transform: translateZ(1vw);
}
.cmt__bottom {
width: 12vw;
height: 19vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-12vw);
}
.cmt__front {
background-image: linear-gradient(to bottom, #b5b3cc, #c4c2d6);
}
.cmt__back {
background-color: #c4c2d6;
}
.cmt__right {
background-color: #fbfbfb;
}
.cmt__left {
background-color: #a7a4c2;
}
.cmt__top {
background-color: #f2f2f2;
}
.cmt__bottom {
background-color: #c4c2d6;
}
/***************/
/***************/
.dl {
width: 2vw;
height: 1vw;
position: absolute;
left: 21.9vw;
bottom: 7vw;
transform: translateZ(1.5vw);
}
.dl__front {
width: 2vw;
height: 11vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-10vw);
}
.dl__back {
width: 2vw;
height: 11vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-2vw) translateY(-11vw);
}
.dl__right {
width: 1vw;
height: 11vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(2vw) translateX(-1vw) translateY(-11vw);
}
.dl__left {
width: 1vw;
height: 11vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-11vw);
}
.dl__top {
width: 2vw;
height: 1vw;
transform-origin: top left;
transform: translateZ(11vw);
}
.dl__bottom {
width: 2vw;
height: 1vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-2vw);
}
.dl__front {
background-image: linear-gradient(to bottom, #8985ad, #9894b7 35%, #a7a4c2 72%, #badfd9);
}
.dl__back {
background-color: #c4c2d6;
}
.dl__right {
background-color: #c4c2d6;
}
.dl__left {
background-color: #9894b7;
}
.dl__top {
background-color: #f2f2f2;
}
.dl__bottom {
background-color: #c4c2d6;
}
.dl__bottom::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 102%;
height: 101%;
background-color: #675D6E;
filter: blur(0.35vw);
}
.dm {
width: 6vw;
height: 1vw;
position: absolute;
left: 16vw;
bottom: 7vw;
transform: translateZ(8.5vw);
}
.dm__front {
width: 6vw;
height: 4vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-3vw);
}
.dm__back {
width: 6vw;
height: 4vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-6vw) translateY(-4vw);
}
.dm__right {
width: 1vw;
height: 4vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(6vw) translateX(-1vw) translateY(-4vw);
}
.dm__left {
width: 1vw;
height: 4vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-4vw);
}
.dm__top {
width: 6vw;
height: 1vw;
transform-origin: top left;
transform: translateZ(4vw);
}
.dm__bottom {
width: 6vw;
height: 1vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-6vw);
}
.dm__front {
background-image: linear-gradient(to bottom, #8985ad, #9894b7);
}
.dm__back {
background-color: #c4c2d6;
}
.dm__right {
background-color: #fbfbfb;
}
.dm__left {
background-color: #c4c2d6;
}
.dm__top {
background-color: #f2f2f2;
}
.dm__bottom {
background-color: #c4c2d6;
}
.dt {
width: 8vw;
height: 1vw;
position: absolute;
left: 14vw;
top: 0;
transform: translateZ(1.5vw);
}
.dt__front {
width: 8vw;
height: 11vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-10vw);
}
.dt__back {
width: 8vw;
height: 11vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-8vw) translateY(-11vw);
}
.dt__right {
width: 1vw;
height: 11vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(8vw) translateX(-1vw) translateY(-11vw);
}
.dt__left {
width: 1vw;
height: 11vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-11vw);
}
.dt__top {
width: 8vw;
height: 1vw;
transform-origin: top left;
transform: translateZ(11vw);
}
.dt__bottom {
width: 8vw;
height: 1vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-8vw);
}
.dt__front {
background-color: #f2f2f2;
}
.dt__back {
background-color: #c4c2d6;
}
.dt__right {
background-color: #fbfbfb;
}
.dt__left {
background-color: #f2f2f2;
}
.dt__top {
background-color: #f2f2f2;
}
.dt__bottom {
background-color: #c4c2d6;
}
/***************/
/***************/
.el {
width: 11.4vw;
height: 1vw;
position: absolute;
left: 3.5vw;
bottom: 7vw;
transform: translateZ(1vw);
}
.el__front {
width: 11.4vw;
height: 11.5vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-11vw);
}
.el__back {
width: 11.4vw;
height: 11.5vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-11.4vw) translateY(-11.5vw);
}
.el__right {
width: 0.5vw;
height: 11.5vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(11.4vw) translateX(-0.5vw) translateY(-11.5vw);
}
.el__left {
width: 0.5vw;
height: 11.5vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-11.5vw);
}
.el__top {
width: 11.4vw;
height: 0.5vw;
transform-origin: top left;
transform: translateZ(11.5vw);
}
.el__bottom {
width: 11.4vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-11.4vw);
}
.el__front {
border: 0.1vw solid rgba(77, 109, 152, 0.5);
overflow: hidden;
background-image: repeating-linear-gradient(-45deg, rgba(97, 135, 190, 0.1) 1vw, rgba(112, 149, 201, 0.1) 1.5vw);
}
.ec {
width: 14vw;
height: 1vw;
position: absolute;
left: 16vw;
bottom: 7vw;
transform: translateZ(1.5vw);
}
.ec__front {
width: 14vw;
height: 11vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-10.5vw);
}
.ec__back {
width: 14vw;
height: 11vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-14vw) translateY(-11vw);
}
.ec__right {
width: 0.5vw;
height: 11vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(14vw) translateX(-0.5vw) translateY(-11vw);
}
.ec__left {
width: 0.5vw;
height: 11vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-11vw);
}
.ec__top {
width: 14vw;
height: 0.5vw;
transform-origin: top left;
transform: translateZ(11vw);
}
.ec__bottom {
width: 14vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-14vw);
}
.ec__front {
border: 0.1vw solid rgba(77, 109, 152, 0.5);
overflow: hidden;
background-image: linear-gradient(to right, rgba(97, 135, 190, 0.1), rgba(112, 149, 201, 0.1));
}
.er {
width: 14vw;
height: 1vw;
position: absolute;
left: 29.8vw;
top: 0;
transform: translateZ(1.5vw);
}
.er__front {
width: 0.1vw;
height: 11vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(5.6vw);
}
.er__back {
width: 0.1vw;
height: 11vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-0.1vw) translateY(-11vw);
}
.er__right {
width: 16.6vw;
height: 11vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(0.1vw) translateX(-16.6vw) translateY(-11vw);
}
.er__left {
width: 16.6vw;
height: 11vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-11vw);
}
.er__top {
width: 0.1vw;
height: 16.6vw;
transform-origin: top left;
transform: translateZ(11vw);
}
.er__bottom {
width: 0.1vw;
height: 16.6vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-0.1vw);
}
.er__right {
border: 0.1vw solid rgba(77, 109, 152, 0.5);
overflow: hidden;
background-image: linear-gradient(to right, rgba(97, 135, 190, 0.1), rgba(112, 149, 201, 0.1));
}
.eb {
width: 26.4vw;
height: 1vw;
position: absolute;
left: 3.5vw;
top: 0;
transform: translateZ(1vw);
}
.eb__front {
width: 26.4vw;
height: 11.4vw;
transform-origin: bottom left;
transform: rotateX(-90deg) translateZ(-10.9vw);
}
.eb__back {
width: 26.4vw;
height: 11.4vw;
transform-origin: top left;
transform: rotateX(-90deg) rotateY(180deg) translateX(-26.4vw) translateY(-11.4vw);
}
.eb__right {
width: 0.5vw;
height: 11.4vw;
transform-origin: top left;
transform: rotateY(90deg) rotateZ(-90deg) translateZ(26.4vw) translateX(-0.5vw) translateY(-11.4vw);
}
.eb__left {
width: 0.5vw;
height: 11.4vw;
transform-origin: top left;
transform: rotateY(-90deg) rotateZ(90deg) translateY(-11.4vw);
}
.eb__top {
width: 26.4vw;
height: 0.5vw;
transform-origin: top left;
transform: translateZ(11.4vw);
}
.eb__bottom {
width: 26.4vw;
height: 0.5vw;
transform-origin: top left;
transform: rotateY(180deg) translateX(-26.4vw);
}
.eb__back {
border: 0.1vw solid rgba(77, 109, 152, 0.5);
overflow: hidden;
background-image: linear-gradient(to right, rgba(97, 135, 190, 0.1),.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0