html 状态灯,HTML5 闪烁的警灯

最新推荐文章于 2023-03-21 12:01:41 发布
最新推荐文章于 2023-03-21 12:01:41 发布
阅读量957 收藏 1
点赞数
文章标签： html 状态灯

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

html,

body {

width: 100%;

height: 100%;

}

body {

background: #000;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

margin: 0;

padding: 0;

}

#target {

width: 550px;

height: 500px;

position: relative;

}

.block {

width: 50px;

height: 50px;

position: absolute;

-webkit-perspective: 5000px;

perspective: 5000px;

color: #f08;

-webkit-animation: blocks 1s linear infinite;

animation: blocks 1s linear infinite;

}

.block:nth-child(2n) {

-webkit-animation-delay: .25s;

animation-delay: .25s;

}

.block:nth-child(3n) {

-webkit-animation-delay: .5s;

animation-delay: .5s;

}

.block__side {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: currentColor;

}

.block[data-x="1"] {

left: 33.33333px;

bottom: 16.66667px;

z-index: 49;

}

.block[data-height="1"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(50px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(50px);

}

.block[data-height="1"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 25px) rotateX(90deg) scaleY(1);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 25px) rotateX(90deg) scaleY(1);

}

.block[data-height="1"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 25px) rotateX(90deg) scaleY(1);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 25px) rotateX(90deg) scaleY(1);

}

.block[data-x="2"] {

left: 66.66667px;

bottom: 33.33333px;

z-index: 48;

}

.block[data-height="2"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(100px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(100px);

}

.block[data-height="2"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 50px) rotateX(90deg) scaleY(2);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 50px) rotateX(90deg) scaleY(2);

}

.block[data-height="2"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 50px) rotateX(90deg) scaleY(2);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 50px) rotateX(90deg) scaleY(2);

}

.block[data-x="3"] {

left: 100px;

bottom: 50px;

z-index: 47;

}

.block[data-height="3"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(150px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(150px);

}

.block[data-height="3"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 75px) rotateX(90deg) scaleY(3);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 75px) rotateX(90deg) scaleY(3);

}

.block[data-height="3"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 75px) rotateX(90deg) scaleY(3);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 75px) rotateX(90deg) scaleY(3);

}

.block[data-x="4"] {

left: 133.33333px;

bottom: 66.66667px;

z-index: 46;

}

.block[data-height="4"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(200px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(200px);

}

.block[data-height="4"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 100px) rotateX(90deg) scaleY(4);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 100px) rotateX(90deg) scaleY(4);

}

.block[data-height="4"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 100px) rotateX(90deg) scaleY(4);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 100px) rotateX(90deg) scaleY(4);

}

.block[data-x="5"] {

left: 166.66667px;

bottom: 83.33333px;

z-index: 45;

}

.block[data-height="5"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(250px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(250px);

}

.block[data-height="5"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 125px) rotateX(90deg) scaleY(5);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 125px) rotateX(90deg) scaleY(5);

}

.block[data-height="5"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 125px) rotateX(90deg) scaleY(5);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 125px) rotateX(90deg) scaleY(5);

}

.block[data-x="6"] {

left: 200px;

bottom: 100px;

z-index: 44;

}

.block[data-height="6"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(300px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(300px);

}

.block[data-height="6"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 150px) rotateX(90deg) scaleY(6);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 150px) rotateX(90deg) scaleY(6);

}

.block[data-height="6"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 150px) rotateX(90deg) scaleY(6);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 150px) rotateX(90deg) scaleY(6);

}

.block[data-x="7"] {

left: 233.33333px;

bottom: 116.66667px;

z-index: 43;

}

.block[data-height="7"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(350px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(350px);

}

.block[data-height="7"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 175px) rotateX(90deg) scaleY(7);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 175px) rotateX(90deg) scaleY(7);

}

.block[data-height="7"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 175px) rotateX(90deg) scaleY(7);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 175px) rotateX(90deg) scaleY(7);

}

.block[data-x="8"] {

left: 266.66667px;

bottom: 133.33333px;

z-index: 42;

}

.block[data-height="8"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(400px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(400px);

}

.block[data-height="8"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 200px) rotateX(90deg) scaleY(8);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 200px) rotateX(90deg) scaleY(8);

}

.block[data-height="8"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 200px) rotateX(90deg) scaleY(8);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 200px) rotateX(90deg) scaleY(8);

}

.block[data-x="9"] {

left: 300px;

bottom: 150px;

z-index: 41;

}

.block[data-height="9"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(450px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(450px);

}

.block[data-height="9"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 225px) rotateX(90deg) scaleY(9);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 225px) rotateX(90deg) scaleY(9);

}

.block[data-height="9"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 225px) rotateX(90deg) scaleY(9);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 225px) rotateX(90deg) scaleY(9);

}

.block[data-x="10"] {

left: 333.33333px;

bottom: 166.66667px;

z-index: 40;

}

.block[data-height="10"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(500px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(500px);

}

.block[data-height="10"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 250px) rotateX(90deg) scaleY(10);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 250px) rotateX(90deg) scaleY(10);

}

.block[data-height="10"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 250px) rotateX(90deg) scaleY(10);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 250px) rotateX(90deg) scaleY(10);

}

.block[data-x="11"] {

left: 366.66667px;

bottom: 183.33333px;

z-index: 39;

}

.block[data-height="11"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(550px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(550px);

}

.block[data-height="11"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 275px) rotateX(90deg) scaleY(11);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 275px) rotateX(90deg) scaleY(11);

}

.block[data-height="11"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 275px) rotateX(90deg) scaleY(11);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 275px) rotateX(90deg) scaleY(11);

}

.block[data-x="12"] {

left: 400px;

bottom: 200px;

z-index: 38;

}

.block[data-height="12"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(600px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(600px);

}

.block[data-height="12"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 300px) rotateX(90deg) scaleY(12);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 300px) rotateX(90deg) scaleY(12);

}

.block[data-height="12"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 300px) rotateX(90deg) scaleY(12);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 300px) rotateX(90deg) scaleY(12);

}

.block[data-x="13"] {

left: 433.33333px;

bottom: 216.66667px;

z-index: 37;

}

.block[data-height="13"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(650px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(650px);

}

.block[data-height="13"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 325px) rotateX(90deg) scaleY(13);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 325px) rotateX(90deg) scaleY(13);

}

.block[data-height="13"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 325px) rotateX(90deg) scaleY(13);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 325px) rotateX(90deg) scaleY(13);

}

.block[data-x="14"] {

left: 466.66667px;

bottom: 233.33333px;

z-index: 36;

}

.block[data-height="14"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(700px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(700px);

}

.block[data-height="14"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 350px) rotateX(90deg) scaleY(14);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 350px) rotateX(90deg) scaleY(14);

}

.block[data-height="14"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 350px) rotateX(90deg) scaleY(14);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 350px) rotateX(90deg) scaleY(14);

}

.block[data-x="15"] {

left: 500px;

bottom: 250px;

z-index: 35;

}

.block[data-height="15"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(750px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(750px);

}

.block[data-height="15"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 375px) rotateX(90deg) scaleY(15);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 375px) rotateX(90deg) scaleY(15);

}

.block[data-height="15"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 375px) rotateX(90deg) scaleY(15);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 375px) rotateX(90deg) scaleY(15);

}

.block[data-x="16"] {

left: 533.33333px;

bottom: 266.66667px;

z-index: 34;

}

.block[data-height="16"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(800px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(800px);

}

.block[data-height="16"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 400px) rotateX(90deg) scaleY(16);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 400px) rotateX(90deg) scaleY(16);

}

.block[data-height="16"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 400px) rotateX(90deg) scaleY(16);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 400px) rotateX(90deg) scaleY(16);

}

.block[data-x="17"] {

left: 566.66667px;

bottom: 283.33333px;

z-index: 33;

}

.block[data-height="17"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(850px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(850px);

}

.block[data-height="17"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 425px) rotateX(90deg) scaleY(17);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 425px) rotateX(90deg) scaleY(17);

}

.block[data-height="17"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 425px) rotateX(90deg) scaleY(17);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 425px) rotateX(90deg) scaleY(17);

}

.block[data-x="18"] {

left: 600px;

bottom: 300px;

z-index: 32;

}

.block[data-height="18"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(900px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(900px);

}

.block[data-height="18"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 450px) rotateX(90deg) scaleY(18);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 450px) rotateX(90deg) scaleY(18);

}

.block[data-height="18"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 450px) rotateX(90deg) scaleY(18);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 450px) rotateX(90deg) scaleY(18);

}

.block[data-x="19"] {

left: 633.33333px;

bottom: 316.66667px;

z-index: 31;

}

.block[data-height="19"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(950px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(950px);

}

.block[data-height="19"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 475px) rotateX(90deg) scaleY(19);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 475px) rotateX(90deg) scaleY(19);

}

.block[data-height="19"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 475px) rotateX(90deg) scaleY(19);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 475px) rotateX(90deg) scaleY(19);

}

.block[data-x="20"] {

left: 666.66667px;

bottom: 333.33333px;

z-index: 30;

}

.block[data-height="20"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1000px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1000px);

}

.block[data-height="20"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 500px) rotateX(90deg) scaleY(20);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 500px) rotateX(90deg) scaleY(20);

}

.block[data-height="20"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 500px) rotateX(90deg) scaleY(20);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 500px) rotateX(90deg) scaleY(20);

}

.block[data-x="21"] {

left: 700px;

bottom: 350px;

z-index: 29;

}

.block[data-height="21"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1050px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1050px);

}

.block[data-height="21"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 525px) rotateX(90deg) scaleY(21);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 525px) rotateX(90deg) scaleY(21);

}

.block[data-height="21"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 525px) rotateX(90deg) scaleY(21);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 525px) rotateX(90deg) scaleY(21);

}

.block[data-x="22"] {

left: 733.33333px;

bottom: 366.66667px;

z-index: 28;

}

.block[data-height="22"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1100px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1100px);

}

.block[data-height="22"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 550px) rotateX(90deg) scaleY(22);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 550px) rotateX(90deg) scaleY(22);

}

.block[data-height="22"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 550px) rotateX(90deg) scaleY(22);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 550px) rotateX(90deg) scaleY(22);

}

.block[data-x="23"] {

left: 766.66667px;

bottom: 383.33333px;

z-index: 27;

}

.block[data-height="23"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1150px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1150px);

}

.block[data-height="23"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 575px) rotateX(90deg) scaleY(23);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 575px) rotateX(90deg) scaleY(23);

}

.block[data-height="23"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 575px) rotateX(90deg) scaleY(23);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 575px) rotateX(90deg) scaleY(23);

}

.block[data-x="24"] {

left: 800px;

bottom: 400px;

z-index: 26;

}

.block[data-height="24"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1200px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1200px);

}

.block[data-height="24"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 600px) rotateX(90deg) scaleY(24);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 600px) rotateX(90deg) scaleY(24);

}

.block[data-height="24"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 600px) rotateX(90deg) scaleY(24);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 600px) rotateX(90deg) scaleY(24);

}

.block[data-x="25"] {

left: 833.33333px;

bottom: 416.66667px;

z-index: 25;

}

.block[data-height="25"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1250px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1250px);

}

.block[data-height="25"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 625px) rotateX(90deg) scaleY(25);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 625px) rotateX(90deg) scaleY(25);

}

.block[data-height="25"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 625px) rotateX(90deg) scaleY(25);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 625px) rotateX(90deg) scaleY(25);

}

.block[data-x="26"] {

left: 866.66667px;

bottom: 433.33333px;

z-index: 24;

}

.block[data-height="26"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1300px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1300px);

}

.block[data-height="26"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 650px) rotateX(90deg) scaleY(26);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 650px) rotateX(90deg) scaleY(26);

}

.block[data-height="26"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 650px) rotateX(90deg) scaleY(26);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 650px) rotateX(90deg) scaleY(26);

}

.block[data-x="27"] {

left: 900px;

bottom: 450px;

z-index: 23;

}

.block[data-height="27"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1350px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1350px);

}

.block[data-height="27"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 675px) rotateX(90deg) scaleY(27);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 675px) rotateX(90deg) scaleY(27);

}

.block[data-height="27"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 675px) rotateX(90deg) scaleY(27);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 675px) rotateX(90deg) scaleY(27);

}

.block[data-x="28"] {

left: 933.33333px;

bottom: 466.66667px;

z-index: 22;

}

.block[data-height="28"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1400px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1400px);

}

.block[data-height="28"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 700px) rotateX(90deg) scaleY(28);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 700px) rotateX(90deg) scaleY(28);

}

.block[data-height="28"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 700px) rotateX(90deg) scaleY(28);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 700px) rotateX(90deg) scaleY(28);

}

.block[data-x="29"] {

left: 966.66667px;

bottom: 483.33333px;

z-index: 21;

}

.block[data-height="29"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1450px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1450px);

}

.block[data-height="29"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 725px) rotateX(90deg) scaleY(29);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 725px) rotateX(90deg) scaleY(29);

}

.block[data-height="29"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 725px) rotateX(90deg) scaleY(29);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 725px) rotateX(90deg) scaleY(29);

}

.block[data-x="30"] {

left: 1000px;

bottom: 500px;

z-index: 20;

}

.block[data-height="30"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1500px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1500px);

}

.block[data-height="30"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 750px) rotateX(90deg) scaleY(30);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 750px) rotateX(90deg) scaleY(30);

}

.block[data-height="30"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 750px) rotateX(90deg) scaleY(30);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 750px) rotateX(90deg) scaleY(30);

}

.block[data-x="31"] {

left: 1033.33333px;

bottom: 516.66667px;

z-index: 19;

}

.block[data-height="31"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1550px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1550px);

}

.block[data-height="31"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 775px) rotateX(90deg) scaleY(31);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 775px) rotateX(90deg) scaleY(31);

}

.block[data-height="31"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 775px) rotateX(90deg) scaleY(31);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 775px) rotateX(90deg) scaleY(31);

}

.block[data-x="32"] {

left: 1066.66667px;

bottom: 533.33333px;

z-index: 18;

}

.block[data-height="32"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1600px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1600px);

}

.block[data-height="32"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 800px) rotateX(90deg) scaleY(32);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 800px) rotateX(90deg) scaleY(32);

}

.block[data-height="32"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 800px) rotateX(90deg) scaleY(32);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 800px) rotateX(90deg) scaleY(32);

}

.block[data-x="33"] {

left: 1100px;

bottom: 550px;

z-index: 17;

}

.block[data-height="33"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1650px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1650px);

}

.block[data-height="33"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 825px) rotateX(90deg) scaleY(33);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 825px) rotateX(90deg) scaleY(33);

}

.block[data-height="33"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 825px) rotateX(90deg) scaleY(33);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 825px) rotateX(90deg) scaleY(33);

}

.block[data-x="34"] {

left: 1133.33333px;

bottom: 566.66667px;

z-index: 16;

}

.block[data-height="34"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1700px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1700px);

}

.block[data-height="34"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 850px) rotateX(90deg) scaleY(34);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 850px) rotateX(90deg) scaleY(34);

}

.block[data-height="34"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 850px) rotateX(90deg) scaleY(34);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 850px) rotateX(90deg) scaleY(34);

}

.block[data-x="35"] {

left: 1166.66667px;

bottom: 583.33333px;

z-index: 15;

}

.block[data-height="35"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1750px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1750px);

}

.block[data-height="35"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 875px) rotateX(90deg) scaleY(35);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 875px) rotateX(90deg) scaleY(35);

}

.block[data-height="35"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 875px) rotateX(90deg) scaleY(35);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 875px) rotateX(90deg) scaleY(35);

}

.block[data-x="36"] {

left: 1200px;

bottom: 600px;

z-index: 14;

}

.block[data-height="36"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1800px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1800px);

}

.block[data-height="36"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 900px) rotateX(90deg) scaleY(36);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 900px) rotateX(90deg) scaleY(36);

}

.block[data-height="36"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 900px) rotateX(90deg) scaleY(36);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 900px) rotateX(90deg) scaleY(36);

}

.block[data-x="37"] {

left: 1233.33333px;

bottom: 616.66667px;

z-index: 13;

}

.block[data-height="37"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1850px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1850px);

}

.block[data-height="37"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 925px) rotateX(90deg) scaleY(37);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 925px) rotateX(90deg) scaleY(37);

}

.block[data-height="37"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 925px) rotateX(90deg) scaleY(37);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 925px) rotateX(90deg) scaleY(37);

}

.block[data-x="38"] {

left: 1266.66667px;

bottom: 633.33333px;

z-index: 12;

}

.block[data-height="38"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1900px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1900px);

}

.block[data-height="38"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 950px) rotateX(90deg) scaleY(38);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 950px) rotateX(90deg) scaleY(38);

}

.block[data-height="38"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 950px) rotateX(90deg) scaleY(38);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 950px) rotateX(90deg) scaleY(38);

}

.block[data-x="39"] {

left: 1300px;

bottom: 650px;

z-index: 11;

}

.block[data-height="39"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(1950px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(1950px);

}

.block[data-height="39"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 975px) rotateX(90deg) scaleY(39);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 975px) rotateX(90deg) scaleY(39);

}

.block[data-height="39"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 975px) rotateX(90deg) scaleY(39);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 975px) rotateX(90deg) scaleY(39);

}

.block[data-x="40"] {

left: 1333.33333px;

bottom: 666.66667px;

z-index: 10;

}

.block[data-height="40"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2000px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2000px);

}

.block[data-height="40"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1000px) rotateX(90deg) scaleY(40);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1000px) rotateX(90deg) scaleY(40);

}

.block[data-height="40"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1000px) rotateX(90deg) scaleY(40);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1000px) rotateX(90deg) scaleY(40);

}

.block[data-x="41"] {

left: 1366.66667px;

bottom: 683.33333px;

z-index: 9;

}

.block[data-height="41"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2050px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2050px);

}

.block[data-height="41"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1025px) rotateX(90deg) scaleY(41);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1025px) rotateX(90deg) scaleY(41);

}

.block[data-height="41"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1025px) rotateX(90deg) scaleY(41);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1025px) rotateX(90deg) scaleY(41);

}

.block[data-x="42"] {

left: 1400px;

bottom: 700px;

z-index: 8;

}

.block[data-height="42"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2100px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2100px);

}

.block[data-height="42"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1050px) rotateX(90deg) scaleY(42);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1050px) rotateX(90deg) scaleY(42);

}

.block[data-height="42"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1050px) rotateX(90deg) scaleY(42);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1050px) rotateX(90deg) scaleY(42);

}

.block[data-x="43"] {

left: 1433.33333px;

bottom: 716.66667px;

z-index: 7;

}

.block[data-height="43"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2150px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2150px);

}

.block[data-height="43"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1075px) rotateX(90deg) scaleY(43);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1075px) rotateX(90deg) scaleY(43);

}

.block[data-height="43"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1075px) rotateX(90deg) scaleY(43);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1075px) rotateX(90deg) scaleY(43);

}

.block[data-x="44"] {

left: 1466.66667px;

bottom: 733.33333px;

z-index: 6;

}

.block[data-height="44"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2200px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2200px);

}

.block[data-height="44"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1100px) rotateX(90deg) scaleY(44);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1100px) rotateX(90deg) scaleY(44);

}

.block[data-height="44"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1100px) rotateX(90deg) scaleY(44);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1100px) rotateX(90deg) scaleY(44);

}

.block[data-x="45"] {

left: 1500px;

bottom: 750px;

z-index: 5;

}

.block[data-height="45"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2250px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2250px);

}

.block[data-height="45"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1125px) rotateX(90deg) scaleY(45);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1125px) rotateX(90deg) scaleY(45);

}

.block[data-height="45"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1125px) rotateX(90deg) scaleY(45);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1125px) rotateX(90deg) scaleY(45);

}

.block[data-x="46"] {

left: 1533.33333px;

bottom: 766.66667px;

z-index: 4;

}

.block[data-height="46"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2300px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2300px);

}

.block[data-height="46"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1150px) rotateX(90deg) scaleY(46);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1150px) rotateX(90deg) scaleY(46);

}

.block[data-height="46"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1150px) rotateX(90deg) scaleY(46);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1150px) rotateX(90deg) scaleY(46);

}

.block[data-x="47"] {

left: 1566.66667px;

bottom: 783.33333px;

z-index: 3;

}

.block[data-height="47"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2350px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2350px);

}

.block[data-height="47"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1175px) rotateX(90deg) scaleY(47);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1175px) rotateX(90deg) scaleY(47);

}

.block[data-height="47"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1175px) rotateX(90deg) scaleY(47);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1175px) rotateX(90deg) scaleY(47);

}

.block[data-x="48"] {

left: 1600px;

bottom: 800px;

z-index: 2;

}

.block[data-height="48"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2400px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2400px);

}

.block[data-height="48"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1200px) rotateX(90deg) scaleY(48);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1200px) rotateX(90deg) scaleY(48);

}

.block[data-height="48"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1200px) rotateX(90deg) scaleY(48);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1200px) rotateX(90deg) scaleY(48);

}

.block[data-x="49"] {

left: 1633.33333px;

bottom: 816.66667px;

z-index: 1;

}

.block[data-height="49"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2450px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2450px);

}

.block[data-height="49"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1225px) rotateX(90deg) scaleY(49);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1225px) rotateX(90deg) scaleY(49);

}

.block[data-height="49"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1225px) rotateX(90deg) scaleY(49);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1225px) rotateX(90deg) scaleY(49);

}

.block[data-x="50"] {

left: 1666.66667px;

bottom: 833.33333px;

z-index: 0;

}

.block[data-height="50"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2500px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2500px);

}

.block[data-height="50"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1250px) rotateX(90deg) scaleY(50);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1250px) rotateX(90deg) scaleY(50);

}

.block[data-height="50"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1250px) rotateX(90deg) scaleY(50);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1250px) rotateX(90deg) scaleY(50);

}

.block[data-x="51"] {

left: 1700px;

bottom: 850px;

z-index: -1;

}

.block[data-height="51"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2550px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2550px);

}

.block[data-height="51"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1275px) rotateX(90deg) scaleY(51);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1275px) rotateX(90deg) scaleY(51);

}

.block[data-height="51"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1275px) rotateX(90deg) scaleY(51);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1275px) rotateX(90deg) scaleY(51);

}

.block[data-x="52"] {

left: 1733.33333px;

bottom: 866.66667px;

z-index: -2;

}

.block[data-height="52"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2600px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2600px);

}

.block[data-height="52"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1300px) rotateX(90deg) scaleY(52);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1300px) rotateX(90deg) scaleY(52);

}

.block[data-height="52"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1300px) rotateX(90deg) scaleY(52);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1300px) rotateX(90deg) scaleY(52);

}

.block[data-x="53"] {

left: 1766.66667px;

bottom: 883.33333px;

z-index: -3;

}

.block[data-height="53"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2650px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2650px);

}

.block[data-height="53"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1325px) rotateX(90deg) scaleY(53);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1325px) rotateX(90deg) scaleY(53);

}

.block[data-height="53"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1325px) rotateX(90deg) scaleY(53);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1325px) rotateX(90deg) scaleY(53);

}

.block[data-x="54"] {

left: 1800px;

bottom: 900px;

z-index: -4;

}

.block[data-height="54"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2700px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2700px);

}

.block[data-height="54"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1350px) rotateX(90deg) scaleY(54);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1350px) rotateX(90deg) scaleY(54);

}

.block[data-height="54"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1350px) rotateX(90deg) scaleY(54);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1350px) rotateX(90deg) scaleY(54);

}

.block[data-x="55"] {

left: 1833.33333px;

bottom: 916.66667px;

z-index: -5;

}

.block[data-height="55"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2750px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2750px);

}

.block[data-height="55"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1375px) rotateX(90deg) scaleY(55);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1375px) rotateX(90deg) scaleY(55);

}

.block[data-height="55"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1375px) rotateX(90deg) scaleY(55);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1375px) rotateX(90deg) scaleY(55);

}

.block[data-x="56"] {

left: 1866.66667px;

bottom: 933.33333px;

z-index: -6;

}

.block[data-height="56"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2800px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2800px);

}

.block[data-height="56"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1400px) rotateX(90deg) scaleY(56);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1400px) rotateX(90deg) scaleY(56);

}

.block[data-height="56"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1400px) rotateX(90deg) scaleY(56);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1400px) rotateX(90deg) scaleY(56);

}

.block[data-x="57"] {

left: 1900px;

bottom: 950px;

z-index: -7;

}

.block[data-height="57"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2850px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2850px);

}

.block[data-height="57"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1425px) rotateX(90deg) scaleY(57);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1425px) rotateX(90deg) scaleY(57);

}

.block[data-height="57"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1425px) rotateX(90deg) scaleY(57);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1425px) rotateX(90deg) scaleY(57);

}

.block[data-x="58"] {

left: 1933.33333px;

bottom: 966.66667px;

z-index: -8;

}

.block[data-height="58"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2900px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2900px);

}

.block[data-height="58"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1450px) rotateX(90deg) scaleY(58);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1450px) rotateX(90deg) scaleY(58);

}

.block[data-height="58"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1450px) rotateX(90deg) scaleY(58);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1450px) rotateX(90deg) scaleY(58);

}

.block[data-x="59"] {

left: 1966.66667px;

bottom: 983.33333px;

z-index: -9;

}

.block[data-height="59"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(2950px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(2950px);

}

.block[data-height="59"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1475px) rotateX(90deg) scaleY(59);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1475px) rotateX(90deg) scaleY(59);

}

.block[data-height="59"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1475px) rotateX(90deg) scaleY(59);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1475px) rotateX(90deg) scaleY(59);

}

.block[data-x="60"] {

left: 2000px;

bottom: 1000px;

z-index: -10;

}

.block[data-height="60"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(3000px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(3000px);

}

.block[data-height="60"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1500px) rotateX(90deg) scaleY(60);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1500px) rotateX(90deg) scaleY(60);

}

.block[data-height="60"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1500px) rotateX(90deg) scaleY(60);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1500px) rotateX(90deg) scaleY(60);

}

.block[data-x="61"] {

left: 2033.33333px;

bottom: 1016.66667px;

z-index: -11;

}

.block[data-height="61"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(3050px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(3050px);

}

.block[data-height="61"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1525px) rotateX(90deg) scaleY(61);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1525px) rotateX(90deg) scaleY(61);

}

.block[data-height="61"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1525px) rotateX(90deg) scaleY(61);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1525px) rotateX(90deg) scaleY(61);

}

.block[data-x="62"] {

left: 2066.66667px;

bottom: 1033.33333px;

z-index: -12;

}

.block[data-height="62"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(3100px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(3100px);

}

.block[data-height="62"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1550px) rotateX(90deg) scaleY(62);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1550px) rotateX(90deg) scaleY(62);

}

.block[data-height="62"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1550px) rotateX(90deg) scaleY(62);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1550px) rotateX(90deg) scaleY(62);

}

.block[data-x="63"] {

left: 2100px;

bottom: 1050px;

z-index: -13;

}

.block[data-height="63"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(3150px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(3150px);

}

.block[data-height="63"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1575px) rotateX(90deg) scaleY(63);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1575px) rotateX(90deg) scaleY(63);

}

.block[data-height="63"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1575px) rotateX(90deg) scaleY(63);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1575px) rotateX(90deg) scaleY(63);

}

.block[data-x="64"] {

left: 2133.33333px;

bottom: 1066.66667px;

z-index: -14;

}

.block[data-height="64"] .block__side:nth-child(1) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translateZ(3200px);

transform: rotateX(60deg) rotateZ(45deg) translateZ(3200px);

}

.block[data-height="64"] .block__side:nth-child(2) {

-webkit-transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1600px) rotateX(90deg) scaleY(64);

transform: rotateX(60deg) rotateZ(45deg) translate3d(0, 50%, 1600px) rotateX(90deg) scaleY(64);

}

.block[data-height="64"] .block__side:nth-child(3) {

-webkit-transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1600px) rotateX(90deg) scaleY(64);

transform: rotateX(60deg) rotateZ(-45deg) translate3d(0, 50%, 1600px) rotateX(90deg) scaleY(64);

}

@-webkit-keyframes blocks {

0% {

color: #f08;

}

32% {

color: #f08;

}

33% {

color: #0f8;

}

62% {

color: #0f8;

}

63% {

color: #80f;

}

100% {

color: #80f;

}

}

@keyframes blocks {

0% {

color: #f08;

}

32% {

color: #f08;

}

33% {

color: #0f8;

}

62% {

color: #0f8;

}

63% {

color: #80f;

}

100% {

color: #80f;

}

}

交易员.Coder
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5显示状态灯,如何使用css3+html5来制作文字霓虹灯效果
weixin_36122809的博客
06-01 540
使用css3+html5来制作文字霓虹灯效果的特点文字带有闪烁的霓虹灯动画，且文字选中时也有很酷的动画特效；文字可动态输入，且输入的文字实时渲染霓虹灯特效。使用css3+html5来制作文字霓虹灯效果的步骤输入需要加入特效的文本。利用box-shadow的多层阴影属性，绘制霓虹管的立体效果。利用text-shadow多层阴影，绘制文字灯管，发光，投影，达到设置立体文字的效果。这里我们着重介绍一下实...
html写弹出告警状态,前端报警信息的实现
weixin_42139252的博客
05-30 2427
现在前台需要这样一个效果:当后台有错误信息时,前台显示如下: 那个红色的点会不断地闪烁,如下: 待用户点击故障报警后,弹出具体信息: 待点击确定后 如下 过一会,如果系统中又有新的,用户还没有检查的故障,红点就会出现并且继续闪烁。前台主要的html style="color: #B8CEDA; font-size: 14px;">故障报警data-options...
[css] 剩余宽度自适应
qq_14993591的博客
08-09 605
calc(100% - 200px); 注意有空格才能生效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal
javascript+html灯泡开关 2种方式
amz_java的博客
03-21 1480
灯泡开关
Twaver-HTML5基础学习(6)告警元素(Alarm)闪烁效果
见贤思齐焉，见不贤内自省
04-17 933
Twaver-HTML5基础学习(5)告警元素(Alarm)闪烁效果
用css实现简易报警灯
肥晨开发的学习之路
02-01 8977
实现的核心是一个灯罩和一个灯芯。灯罩主要是使用了border-radius圆角边框，灯芯主要是radial-gradient径向渐变。灯芯的闪烁，主要是使用到了CSS的@keyframes动画和opacity透明度。由于一般子弹头的圆角柱状，上面的圆角比下面的大，所以上面使用的圆角数据，也需要比下面大。用于灯罩是红色，黄色光需要过度，所以使用从黄色到红色的渐变。使用简单的二维实现的话，我们先需要使用一个红色矩形。这样就实现了一个灯在灯罩内部常亮的一个效果。通过这些，就能基本实现一个简易的报警灯效果。
HTML5 Canvas圆形灯笼时钟动画特效特效代码
03-20
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。在这个特定的案例中，"HTML5 Canvas圆形灯笼时钟动画特效特效代码"是一个利用Canvas API实现的独特...
HTML5+CSS3实现霓虹灯闪烁效果.zip
10-17
在这个“HTML5+CSS3实现霓虹灯闪烁效果”的压缩包中，我们可以学习如何利用这两种技术来创建动态、吸引人的视觉效果，特别是模拟经典的霓虹灯效果。 HTML5是超文本标记语言的最新版本，它在原有的基础上引入了更多...
警示灯闪烁VB代码
03-17
而“警示灯闪烁”则涉及到对控件状态的动态改变，这通常与控件的属性和事件处理程序有关。 在VB中，我们可以创建一个自定义的警示灯控件或者使用已有的控件，比如PictureBox，将其背景色设置为红色或黄色来模拟警示...
VB程序控制USB口的三色报警灯
02-14
用VB程序，能控制USB接口的三色报警灯；亲测可用；VB源代码！
三菱FX系列PLC电池电压低导致程序参数丢失，PROG.E报警灯闪烁的解决办法.docx
05-27
三菱FX系列PLC电池电压低导致程序参数丢失，PROG.E报警灯闪烁的解决办法
HTML中 css红绿黄灯,纯CSS实现红绿灯效果(面试常见)
weixin_29291863的博客
06-21 1915
先看题，别看答案试下吧 ~_~1、下面的代码输出的内容是什么？function O(name){this.name=name||'world';}O.prototype.hello=function(){return function(){console.log('hello '+this.name)}}var o=new O;var hello=o.hello();hello();分析：1、O类...
html5 呼吸灯效果,jQuery仿地铁线路指示灯效果
weixin_35713476的博客
06-04 392
jquery地铁线路指示灯$(document).ready(function(){var index=0;setInterval(function(){$("li").eq(++index).addClass("hover").siblings().removeClass("hover");if(index==13){index=0//代码有点问题，到最后一个索引的时候重新重新冲索引0开始添加颜...
消防车警报
11-18 235
#include<reg52.h> #define uchar unsigned char #define uint unsigned int sbit beef=P1^0; void init(); void delay(uchar t); void delayMS(uchar t); uchar a; void main() { uchar i;...
呼吸灯-html&canvas
TonyCreativeStudio
05-11 3558
在学习html的canvas，做到一个效果，感觉如果有点类似于呼吸灯，于是做个记录。 先是html文档：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="js/modernizr.js" type="text/javascri
HTML彩色呼吸灯效果
苦涩精灵的博客
12-15 1333
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript" src...
css实现简单的告警提示动画效果
qq_38822390的博客
07-12 6403
需求：css实现简单的告警提示动画效果，当接收到实时信息的时候，页面弹出告警信息的动画效果&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css实现告警提示动画&lt;/title&g
JavaScript和HTML实现灯的开关
weixin_45747278的博客
10-13 1552
第五步：查看网页效果 第四步：编写js代码 // var t=time.toLocaleString(); function f(){ //创建一个Date对象 var time= new Date(); //获取当前到前的小时值 var hour=time.getHours(); //获取当前的分钟值 var minute=time.getMinutes(); //获取当前的分秒值 var se...
html+css实现呼吸灯效果
rolinabc的博客
03-09 865
实现呼吸灯效果如下图所示: 具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ box-sizing: border-bo...
用swift写一个水温低于40报警灯灭，高于40低于70报警灯亮，高于70报警灯闪烁五次的代码
最新发布
06-08
好的，以下是一个 Swift 代码示例，用于检测水温并根据不同的水温范围控制报警灯的状态。代码注释中有详细的解释。 ``` // 检测的水温 let waterTemperature = 60 // 水温低于40度，报警灯灭 if waterTemperature ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值