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);
}
總結
以上是生活随笔為你收集整理的360产品演示代码 css3 html5,HTML5 CSS3代码的三维展示的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python自动化工具哪个好用_微软最强
- 下一篇： 2017年html5行业报告,云适配发布