HTML5/CSS3 旋转的3D上海金茂大厦

帝国大厦

css3, building

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2667
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #fc4;
    display: flex;
    display: -webkit-flex;
    height: 100vh;
    margin: 0;
}
.container {
    margin: auto;
    position: relative;
    width: 270px;
    height: 800px;
    transform-style: preserve-3d;
}
.surface {
    width: 270px;
    height: 150px;
    margin: auto;
    position: absolute;
    bottom: 0;
    transform-style: preserve-3d;
    transform: rotateX(45deg) rotateZ(-45deg);
    will-change: transform;
    animation: rotate 30s linear infinite;
}
.block {
    display: none;
    transform-style: preserve-3d;
    position: absolute;
    bottom: 0;
}
.block-inner > div {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    position: absolute;
    width: 10px;
    height: 10px;
}
.block-inner {
    position: relative;
    width: 10px;
    transform-style: preserve-3d;
    transform: rotateX(-90deg) translateZ(10px);
}
.front,
.back {
    background-color: #b7bb97;
    background-image: linear-gradient(90deg, #b7bb97, #b7bb97 2.5px, #336 2.5px, #336 7.5px, #b7bb97 7.5px, #b7bb97);
    background-size: 10px 10px;
}
.back {
    transform: translateZ(-10px) rotateY(180deg);
}
.left,
.right {
    background-color: #959975;
    background-image: linear-gradient(90deg, #959975, #959975 2.5px, #111144 2.5px, #111144 7.5px, #959975 7.5px, #959975);
    background-size: 10px 10px;
}
.left {
    transform-origin: center left;
    transform: rotateY(270deg) translateX(-10px);
}
.right {
    transform-origin: top right;
}
.top {
    background: #fbffdb;
    transform-origin: top center;
}
/* Make window count on each block side more accurate */

.b1 .front,
.b1 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset, 7.5px 0 0 2.5px #b7bb97 inset, -7.5px 0 0 2.5px #b7bb97 inset;
}
.b1 .left,
.b1 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset, 7.5px 0 0 2.5px #959975 inset, -7.5px 0 0 2.5px #959975 inset;
}
.b2 .front,
.b2 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b2 .left,
.b2 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
    background-position: 5px 0;
    background-size: 15px 10px;
    box-shadow: 0 7.5px 0 2.5px #959975 inset, 5px 0 0 2.5px #959975 inset, -5px 0 0 2.5px #959975 inset;
}
.b3 .front,
.b3 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b3 .left,
.b3 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
    background-position: 5px 0;
    background-size: 15px 10px;
    box-shadow: 0 7.5px 0 2.5px #959975 inset, 5px 0 0 2.5px #959975 inset, -5px 0 0 2.5px #959975 inset;
}
.b4 .front,
.b4 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b4 .left,
.b4 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b5 .front,
.b5 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b5 .left,
.b5 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b6 .front,
.b6 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b6 .left,
.b6 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b7 .front,
.b7 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b7 .left,
.b7 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b8 .front,
.b8 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b8 .left,
.b8 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b9 .front,
.b9 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b9 .left,
.b9 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b10 .front,
.b10 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b10 .left,
.b10 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
    background-position: 5px 0;
    background-size: 17.5px 10px;
}
.b11 .front,
.b11 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b11 .left,
.b11 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
    background-position: 2.5px 0;
    background-size: 16.3px 10px;
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b12 .front,
.b12 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b12 .left,
.b12 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
    background-position: 5px 0;
    background-size: 17.5px 10px;
}
.b13 .front,
.b13 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b13 .left,
.b13 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
    background-position: 2.5px 0;
    background-size: 16.3px 10px;
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b16 .front,
.b16 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b16 .left,
.b16 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b17 .front,
.b17 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b17 .left,
.b17 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b18 .front,
.b18 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b18 .left,
.b18 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b19 .front,
.b19 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b19 .left,
.b19 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b20 .front,
.b20 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b20 .left,
.b20 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b21 .front,
.b21 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b21 .left,
.b21 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b16 .left,
.b17 .right {
    background-position: 2.5px 0;
    background-size: 12.5px 10px;
}
.b22 .front::before,
.b22 .back::before {
    background-color: #b7bb97;
    box-shadow: 40px 0 0 #b7bb97;
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 90px;
}
.b23 .front::before,
.b23 .back::before {
    background-color: #b7bb97;
    box-shadow: 20px 0 0 #b7bb97, 60px 0 0 #b7bb97, 80px 0 0 #b7bb97;
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 30px;
}
.b23 .left::before,
.b23 .right::before {
    background-color: #959975;
    box-shadow: 60px 0 0 #959975;
    content: "";
    display: block;
    position: absolute;
    width: 10px;
    height: 30px;
}
.b23 .front,
.b23 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b23 .left,
.b23 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b24 .front,
.b24 .back {
    box-shadow: 0 7.5px 0 2.5px #b7bb97 inset;
}
.b24 .left,
.b24 .right {
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b24 > div > div {
    background-position: 5px 0;
}
.b25 .front,
.b25 .back,
.b25 .left,
.b25 .right {
    background-image: none;
}
.b26 .front,
.b26 .back,
.b26 .left,
.b26 .right {
    background-image: none;
}
.b27 .front,
.b27 .back,
.b27 .left,
.b27 .right {
    background-image: none;
}
.b28 .front,
.b28 .back,
.b28 .left,
.b28 .right {
    background-image: none;
}
.b29 .front,
.b29 .back,
.b29 .left,
.b29 .right {
    background-image: none;
}
.b29 .front,
.b29 .back {
    background-image: linear-gradient(90deg, transparent, transparent 33%, #336 33%, #336 88%, transparent 88%, transparent);
    box-shadow: 0 7.5px 0 1.3px #b7bb97 inset;
}
.b29 .left,
.b29 .right {
    background-image: linear-gradient(90deg, transparent, transparent 33%, #111144 33%, #111144 88%, transparent 88%, transparent);
    box-shadow: 0 7.5px 0 2.5px #959975 inset;
}
.b30 .front,
.b30 .back,
.b30 .left,
.b30 .right {
    background-image: none;
}
.b31 .front,
.b31 .back,
.b31 .left,
.b31 .right {
    background-image: none;
    background-color: transparent;
    background-image: linear-gradient(#666, #666 0.66px, transparent 0.66px, transparent 5.94px, #666 5.94px, #666 6.6px), linear-gradient(45deg, transparent, transparent 4.356px, #666 4.356px, #666 5.016px, transparent 5.016px, transparent), linear-gradient(-45deg, transparent, transparent 4.356px, #666 4.356px, #666 5.016px, transparent 5.016px, transparent);
    background-size: 6.6px 6.6px;
    box-shadow: 0 0 0 0.66px #666 inset;
}
.b31 .top {
    background-color: transparent;
    background-image: linear-gradient(#666, #666 0.66px, transparent 0.66px, transparent 5.94px, #666 5.94px, #666 6.6px), linear-gradient(45deg, transparent, transparent 4.356px, #666 4.356px, #666 5.016px, transparent 5.016px, transparent), linear-gradient(-45deg, transparent, transparent 4.356px, #666 4.356px, #666 5.016px, transparent 5.016px, transparent);
    background-size: 6.6px 6.6px;
    box-shadow: 0 0 0 0.66px #666 inset;
}
/* Antenna top */

.b32 .front,
.b32 .back,
.b32 .left,
.b32 .right {
    background-image: none;
}
.b32 .top {
    background: #888;
}
.b32 .front,
.b32 .back {
    background: #666;
}
.b32 .left,
.b32 .right {
    background: #444;
}
/* Block placement */

.b1 {
    display: inherit;
    transform: translate3d(0px, -150px, 60px);
}
.b1 .block-inner div.top {
    width: 270px;
    height: 150px;
    transform: rotateX(-90deg) translateY(-140px);
}
.b1 .block-inner div.front,
.b1 .block-inner div.back {
    width: 270px;
    height: 60px;
}
.b1 .block-inner div.front {
    transform: translateZ(140px);
}
.b1 .block-inner div.left,
.b1 .block-inner div.right {
    width: 150px;
    height: 60px;
}
.b1 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 120px);
}
.b2 {
    display: inherit;
    transform: translate3d(40px, -130px, 210px);
}
.b2 .block-inner div.top {
    width: 20px;
    height: 110px;
    transform: rotateX(-90deg) translateY(-100px);
}
.b2 .block-inner div.front,
.b2 .block-inner div.back {
    width: 20px;
    height: 150px;
}
.b2 .block-inner div.front {
    transform: translateZ(100px);
}
.b2 .block-inner div.left,
.b2 .block-inner div.right {
    width: 110px;
    height: 150px;
}
.b2 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -90px);
}
.b3 {
    display: inherit;
    transform: translate3d(210px, -130px, 210px);
}
.b3 .block-inner div.top {
    width: 20px;
    height: 110px;
    transform: rotateX(-90deg) translateY(-100px);
}
.b3 .block-inner div.front,
.b3 .block-inner div.back {
    width: 20px;
    height: 150px;
}
.b3 .block-inner div.front {
    transform: translateZ(100px);
}
.b3 .block-inner div.left,
.b3 .block-inner div.right {
    width: 110px;
    height: 150px;
}
.b3 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -90px);
}
.b4 {
    display: inherit;
    transform: translate3d(60px, -30px, 250px);
}
.b4 .block-inner div.top {
    width: 50px;
    height: 20px;
    transform: rotateX(-90deg) translateY(-10px);
}
.b4 .block-inner div.front,
.b4 .block-inner div.back {
    width: 50px;
    height: 190px;
}
.b4 .block-inner div.front {
    transform: translateZ(10px);
}
.b4 .block-inner div.left,
.b4 .block-inner div.right {
    width: 20px;
    height: 190px;
}
.b4 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 30px);
}
.b5 {
    display: inherit;
    transform: translate3d(120px, -40px, 290px);
}
.b5 .block-inner div.top {
    width: 30px;
    height: 20px;
    transform: rotateX(-90deg) translateY(-10px);
}
.b5 .block-inner div.front,
.b5 .block-inner div.back {
    width: 30px;
    height: 230px;
}
.b5 .block-inner div.front {
    transform: translateZ(10px);
}
.b5 .block-inner div.left,
.b5 .block-inner div.right {
    width: 20px;
    height: 230px;
}
.b5 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 10px);
}
.b6 {
    display: inherit;
    transform: translate3d(160px, -30px, 250px);
}
.b6 .block-inner div.top {
    width: 50px;
    height: 20px;
    transform: rotateX(-90deg) translateY(-10px);
}
.b6 .block-inner div.front,
.b6 .block-inner div.back {
    width: 50px;
    height: 190px;
}
.b6 .block-inner div.front {
    transform: translateZ(10px);
}
.b6 .block-inner div.left,
.b6 .block-inner div.right {
    width: 20px;
    height: 190px;
}
.b6 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 30px);
}
.b7 {
    display: inherit;
    transform: translate3d(60px, -140px, 250px);
}
.b7 .block-inner div.top {
    width: 50px;
    height: 20px;
    transform: rotateX(-90deg) translateY(-10px);
}
.b7 .block-inner div.front,
.b7 .block-inner div.back {
    width: 50px;
    height: 190px;
}
.b7 .block-inner div.front {
    transform: translateZ(10px);
}
.b7 .block-inner div.left,
.b7 .block-inner div.right {
    width: 20px;
    height: 190px;
}
.b7 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 30px);
}
.b8 {
    display: inherit;
    transform: translate3d(120px, -130px, 290px);
}
.b8 .block-inner div.top {
    width: 30px;
    height: 20px;
    transform: rotateX(-90deg) translateY(-10px);
}
.b8 .block-inner div.front,
.b8 .block-inner div.back {
    width: 30px;
    height: 230px;
}
.b8 .block-inner div.front {
    transform: translateZ(10px);
}
.b8 .block-inner div.left,
.b8 .block-inner div.right {
    width: 20px;
    height: 230px;
}
.b8 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 10px);
}
.b9 {
    display: inherit;
    transform: translate3d(160px, -140px, 250px);
}
.b9 .block-inner div.top {
    width: 50px;
    height: 20px;
    transform: rotateX(-90deg) translateY(-10px);
}
.b9 .block-inner div.front,
.b9 .block-inner div.back {
    width: 50px;
    height: 190px;
}
.b9 .block-inner div.front {
    transform: translateZ(10px);
}
.b9 .block-inner div.left,
.b9 .block-inner div.right {
    width: 20px;
    height: 190px;
}
.b9 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 30px);
}
.b10 {
    display: inherit;
    transform: translate3d(60px, -120px, 290px);
}
.b10 .block-inner div.top {
    width: 10px;
    height: 90px;
    transform: rotateX(-90deg) translateY(-80px);
}
.b10 .block-inner div.front,
.b10 .block-inner div.back {
    width: 10px;
    height: 80px;
}
.b10 .block-inner div.front {
    transform: translateZ(80px);
}
.b10 .block-inner div.left,
.b10 .block-inner div.right {
    width: 90px;
    height: 80px;
}
.b10 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -80px);
}
.b11 {
    display: inherit;
    transform: translate3d(70px, -130px, 560px);
}
.b11 .block-inner div.top {
    width: 40px;
    height: 110px;
    transform: rotateX(-90deg) translateY(-100px);
}
.b11 .block-inner div.front,
.b11 .block-inner div.back {
    width: 40px;
    height: 310px;
}
.b11 .block-inner div.front {
    transform: translateZ(100px);
}
.b11 .block-inner div.left,
.b11 .block-inner div.right {
    width: 110px;
    height: 310px;
}
.b11 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -70px);
}
.b12 {
    display: inherit;
    transform: translate3d(200px, -120px, 290px);
}
.b12 .block-inner div.top {
    width: 10px;
    height: 90px;
    transform: rotateX(-90deg) translateY(-80px);
}
.b12 .block-inner div.front,
.b12 .block-inner div.back {
    width: 10px;
    height: 80px;
}
.b12 .block-inner div.front {
    transform: translateZ(80px);
}
.b12 .block-inner div.left,
.b12 .block-inner div.right {
    width: 90px;
    height: 80px;
}
.b12 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -80px);
}
.b13 {
    display: inherit;
    transform: translate3d(160px, -130px, 560px);
}
.b13 .block-inner div.top {
    width: 40px;
    height: 110px;
    transform: rotateX(-90deg) translateY(-100px);
}
.b13 .block-inner div.front,
.b13 .block-inner div.back {
    width: 40px;
    height: 310px;
}
.b13 .block-inner div.front {
    transform: translateZ(100px);
}
.b13 .block-inner div.left,
.b13 .block-inner div.right {
    width: 110px;
    height: 310px;
}
.b13 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -70px);
}
.b14 {
    display: inherit;
    transform: translate3d(120px, -50px, 560px);
}
.b14 .block-inner div.top {
    width: 30px;
    height: 10px;
    transform: rotateX(-90deg) translateY(0px);
}
.b14 .block-inner div.front,
.b14 .block-inner div.back {
    width: 30px;
    height: 500px;
}
.b14 .block-inner div.front {
    transform: translateZ(0px);
}
.b14 .block-inner div.left,
.b14 .block-inner div.right {
    width: 10px;
    height: 500px;
}
.b14 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 20px);
}
.b15 {
    display: inherit;
    transform: translate3d(120px, -110px, 560px);
}
.b15 .block-inner div.top {
    width: 30px;
    height: 10px;
    transform: rotateX(-90deg) translateY(0px);
}
.b15 .block-inner div.front,
.b15 .block-inner div.back {
    width: 30px;
    height: 500px;
}
.b15 .block-inner div.front {
    transform: translateZ(0px);
}
.b15 .block-inner div.left,
.b15 .block-inner div.right {
    width: 10px;
    height: 500px;
}
.b15 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 20px);
}
.b16 {
    display: inherit;
    transform: translate3d(80px, -120px, 650px);
}
.b16 .block-inner div.top {
    width: 30px;
    height: 90px;
    transform: rotateX(-90deg) translateY(-80px);
}
.b16 .block-inner div.front,
.b16 .block-inner div.back {
    width: 30px;
    height: 90px;
}
.b16 .block-inner div.front {
    transform: translateZ(80px);
}
.b16 .block-inner div.left,
.b16 .block-inner div.right {
    width: 90px;
    height: 90px;
}
.b16 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -60px);
}
.b17 {
    display: inherit;
    transform: translate3d(160px, -120px, 650px);
}
.b17 .block-inner div.top {
    width: 30px;
    height: 90px;
    transform: rotateX(-90deg) translateY(-80px);
}
.b17 .block-inner div.front,
.b17 .block-inner div.back {
    width: 30px;
    height: 90px;
}
.b17 .block-inner div.front {
    transform: translateZ(80px);
}
.b17 .block-inner div.left,
.b17 .block-inner div.right {
    width: 90px;
    height: 90px;
}
.b17 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -60px);
}
.b18 {
    display: inherit;
    transform: translate3d(110px, -40px, 560px);
}
.b18 .block-inner div.top {
    width: 10px;
    height: 20px;
    transform: rotateX(-90deg) translateY(-10px);
}
.b18 .block-inner div.front,
.b18 .block-inner div.back {
    width: 10px;
    height: 500px;
}
.b18 .block-inner div.front {
    transform: translateZ(10px);
}
.b18 .block-inner div.left,
.b18 .block-inner div.right {
    width: 20px;
    height: 500px;
}
.b18 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -10px);
}
.b19 {
    display: inherit;
    transform: translate3d(150px, -40px, 560px);
}
.b19 .block-inner div.top {
    width: 10px;
    height: 20px;
    transform: rotateX(-90deg) translateY(-10px);
}
.b19 .block-inner div.front,
.b19 .block-inner div.back {
    width: 10px;
    height: 500px;
}
.b19 .block-inner div.front {
    transform: translateZ(10px);
}
.b19 .block-inner div.left,
.b19 .block-inner div.right {
    width: 20px;
    height: 500px;
}
.b19 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -10px);
}
.b20 {
    display: inherit;
    transform: translate3d(110px, -130px, 560px);
}
.b20 .block-inner div.top {
    width: 10px;
    height: 20px;
    transform: rotateX(-90deg) translateY(-10px);
}
.b20 .block-inner div.front,
.b20 .block-inner div.back {
    width: 10px;
    height: 500px;
}
.b20 .block-inner div.front {
    transform: translateZ(10px);
}
.b20 .block-inner div.left,
.b20 .block-inner div.right {
    width: 20px;
    height: 500px;
}
.b20 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -10px);
}
.b21 {
    display: inherit;
    transform: translate3d(150px, -130px, 560px);
}
.b21 .block-inner div.top {
    width: 10px;
    height: 20px;
    transform: rotateX(-90deg) translateY(-10px);
}
.b21 .block-inner div.front,
.b21 .block-inner div.back {
    width: 10px;
    height: 500px;
}
.b21 .block-inner div.front {
    transform: translateZ(10px);
}
.b21 .block-inner div.left,
.b21 .block-inner div.right {
    width: 20px;
    height: 500px;
}
.b21 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -10px);
}
.b22 {
    display: inherit;
    transform: translate3d(110px, -110px, 650px);
}
.b22 .block-inner div.top {
    width: 50px;
    height: 70px;
    transform: rotateX(-90deg) translateY(-60px);
}
.b22 .block-inner div.front,
.b22 .block-inner div.back {
    width: 50px;
    height: 90px;
}
.b22 .block-inner div.front {
    transform: translateZ(60px);
}
.b22 .block-inner div.left,
.b22 .block-inner div.right {
    width: 70px;
    height: 90px;
}
.b22 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, -20px);
}
.b23 {
    display: inherit;
    transform: translate3d(90px, -110px, 680px);
}
.b23 .block-inner div.top {
    width: 90px;
    height: 70px;
    transform: rotateX(-90deg) translateY(-60px);
}
.b23 .block-inner div.front,
.b23 .block-inner div.back {
    width: 90px;
    height: 30px;
}
.b23 .block-inner div.front {
    transform: translateZ(60px);
}
.b23 .block-inner div.left,
.b23 .block-inner div.right {
    width: 70px;
    height: 30px;
}
.b23 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 20px);
}
.b24 {
    display: inherit;
    transform: translate3d(100px, -100px, 700px);
}
.b24 .block-inner div.top {
    width: 70px;
    height: 50px;
    transform: rotateX(-90deg) translateY(-40px);
}
.b24 .block-inner div.front,
.b24 .block-inner div.back {
    width: 70px;
    height: 20px;
}
.b24 .block-inner div.front {
    transform: translateZ(40px);
}
.b24 .block-inner div.left,
.b24 .block-inner div.right {
    width: 50px;
    height: 20px;
}
.b24 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 20px);
}
.b25 {
    display: inherit;
    transform: translate3d(110px, -92.5px, 704px);
}
.b25 .block-inner div.top {
    width: 50px;
    height: 35px;
    transform: rotateX(-90deg) translateY(-25px);
}
.b25 .block-inner div.front,
.b25 .block-inner div.back {
    width: 50px;
    height: 4px;
}
.b25 .block-inner div.front {
    transform: translateZ(25px);
}
.b25 .block-inner div.left,
.b25 .block-inner div.right {
    width: 35px;
    height: 4px;
}
.b25 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 15px);
}
.b26 {
    display: inherit;
    transform: translate3d(112.5px, -90px, 706px);
}
.b26 .block-inner div.top {
    width: 45px;
    height: 30px;
    transform: rotateX(-90deg) translateY(-20px);
}
.b26 .block-inner div.front,
.b26 .block-inner div.back {
    width: 45px;
    height: 2px;
}
.b26 .block-inner div.front {
    transform: translateZ(20px);
}
.b26 .block-inner div.left,
.b26 .block-inner div.right {
    width: 30px;
    height: 2px;
}
.b26 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 15px);
}
.b27 {
    display: inherit;
    transform: translate3d(115px, -87.5px, 708px);
}
.b27 .block-inner div.top {
    width: 40px;
    height: 25px;
    transform: rotateX(-90deg) translateY(-15px);
}
.b27 .block-inner div.front,
.b27 .block-inner div.back {
    width: 40px;
    height: 2px;
}
.b27 .block-inner div.front {
    transform: translateZ(15px);
}
.b27 .block-inner div.left,
.b27 .block-inner div.right {
    width: 25px;
    height: 2px;
}
.b27 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 15px);
}
.b28 {
    display: inherit;
    transform: translate3d(117.5px, -85px, 710px);
}
.b28 .block-inner div.top {
    width: 35px;
    height: 20px;
    transform: rotateX(-90deg) translateY(-10px);
}
.b28 .block-inner div.front,
.b28 .block-inner div.back {
    width: 35px;
    height: 2px;
}
.b28 .block-inner div.front {
    transform: translateZ(10px);
}
.b28 .block-inner div.left,
.b28 .block-inner div.right {
    width: 20px;
    height: 2px;
}
.b28 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 15px);
}
.b29 {
    display: inherit;
    transform: translate3d(128.8px, -80.4px, 826px);
}
.b29 .block-inner div.top {
    width: 11.6px;
    height: 11.6px;
    transform: rotateX(-90deg) translateY(-1.6px);
}
.b29 .block-inner div.front,
.b29 .block-inner div.back {
    width: 11.6px;
    height: 116px;
}
.b29 .block-inner div.front {
    transform: translateZ(1.6px);
}
.b29 .block-inner div.left,
.b29 .block-inner div.right {
    width: 11.6px;
    height: 116px;
}
.b29 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 0px);
}
.b30 {
    display: inherit;
    transform: translate3d(131.6px, -78.2px, 832.6px);
}
.b30 .block-inner div.top {
    width: 6.6px;
    height: 6.6px;
    transform: rotateX(-90deg) translateY(3.4px);
}
.b30 .block-inner div.front,
.b30 .block-inner div.back {
    width: 6.6px;
    height: 6.6px;
}
.b30 .block-inner div.front {
    transform: translateZ(-3.4px);
}
.b30 .block-inner div.left,
.b30 .block-inner div.right {
    width: 6.6px;
    height: 6.6px;
}
.b30 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 0px);
}
.b31 {
    display: inherit;
    transform: translate3d(131.6px, -78.2px, 908.1px);
}
.b31 .block-inner div.top {
    width: 6.6px;
    height: 6.6px;
    transform: rotateX(-90deg) translateY(3.4px);
}
.b31 .block-inner div.front,
.b31 .block-inner div.back {
    width: 6.6px;
    height: 75.7px;
}
.b31 .block-inner div.front {
    transform: translateZ(-3.4px);
}
.b31 .block-inner div.left,
.b31 .block-inner div.right {
    width: 6.6px;
    height: 75.7px;
}
.b31 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 0px);
}
.b32 {
    display: inherit;
    transform: translate3d(132.4px, -77.4px, 982.4px);
}
.b32 .block-inner div.top {
    width: 5px;
    height: 5px;
    transform: rotateX(-90deg) translateY(5px);
}
.b32 .block-inner div.front,
.b32 .block-inner div.back {
    width: 5px;
    height: 75px;
}
.b32 .block-inner div.front {
    transform: translateZ(-5px);
}
.b32 .block-inner div.left,
.b32 .block-inner div.right {
    width: 5px;
    height: 75px;
}
.b32 .block-inner div.right {
    transform: rotateY(-270deg) translate3d(10px, 0, 0px);
}
@keyframes rotate {
    from {
        transform: rotateX(45deg) rotateZ(-45deg);
    }
    to {
        transform: rotateX(45deg) rotateZ(315deg);
    }
}

HTML

帝国大厦

css3, building

编辑器支持Emmet

快捷键

帝国大厦

css3, building

HTML5 GSAP摩天大楼上的旋转灯光特效

HTML5 CSS3全屏3D盒子旋转菜单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：