360产品演示代码 css3 html5,HTML5 CSS3代码的三维展示

CSS

语言：

CSSSCSS

确定

body {

background-color: #ececec;

}

pre {

white-space: pre-wrap;

}

#perspective {

position: relative;

width: 560px;

height: 446px;

margin: 80px auto 0;

z-index: 1;

user-select: none;

cursor: default;

transform-style: preserve-3d;

}

#perspective.rotated {

transform: translateX(-40px) rotateX(51deg) rotateZ(-45deg);

}

.container {

position: absolute;

top: 30px;

left: 70px;

width: 640px;

margin: 0;

font-size: 2rem;

line-height: 3.8rem;

transform-style: preserve-3d;

}

.block {

display: inline-block;

height: 40px;

position: relative;

transform: translateZ(20px);

transform-style: preserve-3d;

text-align: center;

line-height: 40px;

padding: 0 0.5em;

font-size: 18px;

}

.block.gap {

margin-right: 15px;

}

.block.black {

background-color: #000000;

}

.block.black:before {

background-color: #0d0d0d;

}

.block.black:after {

background-color: black;

}

.block.pink {

background-color: #ff3b73;

}

.block.pink:before {

background-color: #ff5585;

}

.block.pink:after {

background-color: #ff2261;

}

.block.green {

background-color: #50fa7b;

}

.block.green:before {

background-color: #69fb8e;

}

.block.green:after {

background-color: #37f968;

}

.block.orange {

background-color: #ff9d48;

}

.block.orange:before {

background-color: #ffab62;

}

.block.orange:after {

background-color: #ff8f2f;

}

.block.purple {

background-color: #bd85c8;

}

.block.purple:before {

background-color: #c797d0;

}

.block.purple:after {

background-color: #b373c0;

}

.block.white {

background-color: #ffffff;

}

.block.white:before {

background-color: white;

}

.block.white:after {

background-color: #f2f2f2;

}

.block,

.block:before,

.block:after,

.block__back {

backface-visibility: hidden;

}

.block:before {

content: "";

position: absolute;

transform: rotateY(-90deg) translateX(-20px) translateZ(-0.1px);

transform-origin: 0 100%;

left: 0;

top: 0;

width: 20px;

height: 40px;

}

.block:after {

content: "";

position: absolute;

transform: translateY(40px) rotateX(-90deg) translateY(-0.1px);

transform-origin: 0 0;

left: 0;

top: 0;

width: 100%;

height: 20px;

}

.block__back {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

transform: translateZ(-20px) translateY(-0.3px);

box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.4);

}