点击3D粉碎效果

下载代码

html

css

分享到微信朋友圈

html

css

@import url("https://fonts.googleapis.com/css2?family=Train+One&display=swap");
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  background-color: #111;
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 750px;
  overflow: hidden;
}

input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  position: fixed;
  top: 1%;
  left: 1%;
  top: -100%;
  left: -100%;
  visibility: hidden;
}

.scene {
  position: relative;
  width: 400px;
  height: 150px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  cursor: pointer;
  -webkit-animation: sceneRotate 16s infinite ease-in-out;
          animation: sceneRotate 16s infinite ease-in-out;
}
@-webkit-keyframes sceneRotate {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-180deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}
@keyframes sceneRotate {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(-180deg);
  }
  100% {
    transform: rotateY(-360deg);
  }
}

.btn > div {
  position: absolute;
  width: 50px;
  height: 50px;
  overflow: hidden;
  transition-property: transform, opacity;
}
.btn > div::after {
  content: "Click me";
  font-family: "Train One", cursive;
  position: absolute;
  width: 400px;
  height: 150px;
  font-size: 80px;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-a > div:nth-child(1), .btn-c > div:nth-child(1) {
  top: 0px;
  left: 0px;
}
.btn-b > div:nth-child(1), .btn-d > div:nth-child(1) {
  top: 0px;
  left: 350px;
}
.btn > div:nth-child(1)::after {
  transform: translate(0px, 0px);
}
.btn-a > div:nth-child(9), .btn-c > div:nth-child(9) {
  top: 50px;
  left: 0px;
}
.btn-b > div:nth-child(9), .btn-d > div:nth-child(9) {
  top: 50px;
  left: 350px;
}
.btn > div:nth-child(9)::after {
  transform: translate(0px, -50px);
}
.btn-a > div:nth-child(17), .btn-c > div:nth-child(17) {
  top: 100px;
  left: 0px;
}
.btn-b > div:nth-child(17), .btn-d > div:nth-child(17) {
  top: 100px;
  left: 350px;
}
.btn > div:nth-child(17)::after {
  transform: translate(0px, -100px);
}
.btn-a > div:nth-child(2), .btn-c > div:nth-child(2) {
  top: 0px;
  left: 50px;
}
.btn-b > div:nth-child(2), .btn-d > div:nth-child(2) {
  top: 0px;
  left: 300px;
}
.btn > div:nth-child(2)::after {
  transform: translate(-50px, 0px);
}
.btn-a > div:nth-child(10), .btn-c > div:nth-child(10) {
  top: 50px;
  left: 50px;
}
.btn-b > div:nth-child(10), .btn-d > div:nth-child(10) {
  top: 50px;
  left: 300px;
}
.btn > div:nth-child(10)::after {
  transform: translate(-50px, -50px);
}
.btn-a > div:nth-child(18), .btn-c > div:nth-child(18) {
  top: 100px;
  left: 50px;
}
.btn-b > div:nth-child(18), .btn-d > div:nth-child(18) {
  top: 100px;
  left: 300px;
}
.btn > div:nth-child(18)::after {
  transform: translate(-50px, -100px);
}
.btn-a > div:nth-child(3), .btn-c > div:nth-child(3) {
  top: 0px;
  left: 100px;
}
.btn-b > div:nth-child(3), .btn-d > div:nth-child(3) {
  top: 0px;
  left: 250px;
}
.btn > div:nth-child(3)::after {
  transform: translate(-100px, 0px);
}
.btn-a > div:nth-child(11), .btn-c > div:nth-child(11) {
  top: 50px;
  left: 100px;
}
.btn-b > div:nth-child(11), .btn-d > div:nth-child(11) {
  top: 50px;
  left: 250px;
}
.btn > div:nth-child(11)::after {
  transform: translate(-100px, -50px);
}
.btn-a > div:nth-child(19), .btn-c > div:nth-child(19) {
  top: 100px;
  left: 100px;
}
.btn-b > div:nth-child(19), .btn-d > div:nth-child(19) {
  top: 100px;
  left: 250px;
}
.btn > div:nth-child(19)::after {
  transform: translate(-100px, -100px);
}
.btn-a > div:nth-child(4), .btn-c > div:nth-child(4) {
  top: 0px;
  left: 150px;
}
.btn-b > div:nth-child(4), .btn-d > div:nth-child(4) {
  top: 0px;
  left: 200px;
}
.btn > div:nth-child(4)::after {
  transform: translate(-150px, 0px);
}
.btn-a > div:nth-child(12), .btn-c > div:nth-child(12) {
  top: 50px;
  left: 150px;
}
.btn-b > div:nth-child(12), .btn-d > div:nth-child(12) {
  top: 50px;
  left: 200px;
}
.btn > div:nth-child(12)::after {
  transform: translate(-150px, -50px);
}
.btn-a > div:nth-child(20), .btn-c > div:nth-child(20) {
  top: 100px;
  left: 150px;
}
.btn-b > div:nth-child(20), .btn-d > div:nth-child(20) {
  top: 100px;
  left: 200px;
}
.btn > div:nth-child(20)::after {
  transform: translate(-150px, -100px);
}
.btn-a > div:nth-child(5), .btn-c > div:nth-child(5) {
  top: 0px;
  left: 200px;
}
.btn-b > div:nth-child(5), .btn-d > div:nth-child(5) {
  top: 0px;
  left: 150px;
}
.btn > div:nth-child(5)::after {
  transform: translate(-200px, 0px);
}
.btn-a > div:nth-child(13), .btn-c > div:nth-child(13) {
  top: 50px;
  left: 200px;
}
.btn-b > div:nth-child(13), .btn-d > div:nth-child(13) {
  top: 50px;
  left: 150px;
}
.btn > div:nth-child(13)::after {
  transform: translate(-200px, -50px);
}
.btn-a > div:nth-child(21), .btn-c > div:nth-child(21) {
  top: 100px;
  left: 200px;
}
.btn-b > div:nth-child(21), .btn-d > div:nth-child(21) {
  top: 100px;
  left: 150px;
}
.btn > div:nth-child(21)::after {
  transform: translate(-200px, -100px);
}
.btn-a > div:nth-child(6), .btn-c > div:nth-child(6) {
  top: 0px;
  left: 250px;
}
.btn-b > div:nth-child(6), .btn-d > div:nth-child(6) {
  top: 0px;
  left: 100px;
}
.btn > div:nth-child(6)::after {
  transform: translate(-250px, 0px);
}
.btn-a > div:nth-child(14), .btn-c > div:nth-child(14) {
  top: 50px;
  left: 250px;
}
.btn-b > div:nth-child(14), .btn-d > div:nth-child(14) {
  top: 50px;
  left: 100px;
}
.btn > div:nth-child(14)::after {
  transform: translate(-250px, -50px);
}
.btn-a > div:nth-child(22), .btn-c > div:nth-child(22) {
  top: 100px;
  left: 250px;
}
.btn-b > div:nth-child(22), .btn-d > div:nth-child(22) {
  top: 100px;
  left: 100px;
}
.btn > div:nth-child(22)::after {
  transform: translate(-250px, -100px);
}
.btn-a > div:nth-child(7), .btn-c > div:nth-child(7) {
  top: 0px;
  left: 300px;
}
.btn-b > div:nth-child(7), .btn-d > div:nth-child(7) {
  top: 0px;
  left: 50px;
}
.btn > div:nth-child(7)::after {
  transform: translate(-300px, 0px);
}
.btn-a > div:nth-child(15), .btn-c > div:nth-child(15) {
  top: 50px;
  left: 300px;
}
.btn-b > div:nth-child(15), .btn-d > div:nth-child(15) {
  top: 50px;
  left: 50px;
}
.btn > div:nth-child(15)::after {
  transform: translate(-300px, -50px);
}
.btn-a > div:nth-child(23), .btn-c > div:nth-child(23) {
  top: 100px;
  left: 300px;
}
.btn-b > div:nth-child(23), .btn-d > div:nth-child(23) {
  top: 100px;
  left: 50px;
}
.btn > div:nth-child(23)::after {
  transform: translate(-300px, -100px);
}
.btn-a > div:nth-child(8), .btn-c > div:nth-child(8) {
  top: 0px;
  left: 350px;
}
.btn-b > div:nth-child(8), .btn-d > div:nth-child(8) {
  top: 0px;
  left: 0px;
}
.btn > div:nth-child(8)::after {
  transform: translate(-350px, 0px);
}
.btn-a > div:nth-child(16), .btn-c > div:nth-child(16) {
  top: 50px;
  left: 350px;
}
.btn-b > div:nth-child(16), .btn-d > div:nth-child(16) {
  top: 50px;
  left: 0px;
}
.btn > div:nth-child(16)::after {
  transform: translate(-350px, -50px);
}
.btn-a > div:nth-child(24), .btn-c > div:nth-child(24) {
  top: 100px;
  left: 350px;
}
.btn-b > div:nth-child(24), .btn-d > div:nth-child(24) {
  top: 100px;
  left: 0px;
}
.btn > div:nth-child(24)::after {
  transform: translate(-350px, -100px);
}
.btn-a > div {
  background-color: #880E4F;
}
.btn-b > div {
  background-color: #AD1457;
}
.btn-c > div {
  background-color: #33691E;
}
.btn-d > div {
  background-color: #558B2F;
}

input[type=checkbox]:not(:checked) + label .btn-a > div,
input[type=checkbox]:checked + label .btn-c > div {
  transform: translateZ(1px);
  transition-duration: 2s;
  transition-delay: 0.5s;
  transition-timing-function: ease-in-out;
}

input[type=checkbox]:not(:checked) + label .btn-b > div,
input[type=checkbox]:checked + label .btn-d > div {
  transform: translateZ(-1px) rotateY(180deg);
  transition-duration: 2s;
  transition-delay: 0.5s;
  transition-timing-function: ease-in-out;
}

input[type=checkbox]:not(:checked) + label .btn-c > div,
input[type=checkbox]:not(:checked) + label .btn-d > div,
input[type=checkbox]:checked + label .btn-a > div,
input[type=checkbox]:checked + label .btn-b > div {
  transition-duration: 2.5s;
  transition-delay: 0s;
  transition-timing-function: ease-out;
  opacity: 0.5;
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(1) {
  transform: translate3d(-311.5972222222px, 181.9444444444px, -217.0138888889px) rotateX(388deg) rotateY(608deg) rotateZ(639deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(1) {
  transform: translate3d(-201.1805555556px, 215.625px, -47.6388888889px) rotateX(483deg) rotateY(54deg) rotateZ(439deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(1) {
  transform: translate3d(-103.125px, 145.5555555556px, 160.1388888889px) rotateX(158deg) rotateY(507deg) rotateZ(373deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(1) {
  transform: translate3d(-335.0694444444px, -143.75px, 291.5972222222px) rotateX(462deg) rotateY(25deg) rotateZ(153deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(9) {
  transform: translate3d(-141.1805555556px, 36.1805555556px, 152.6388888889px) rotateX(321deg) rotateY(608deg) rotateZ(351deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(9) {
  transform: translate3d(-262.6388888889px, 346.0416666667px, -165.2777777778px) rotateX(662deg) rotateY(556deg) rotateZ(249deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(9) {
  transform: translate3d(-144.9305555556px, 330.6944444444px, -164.5138888889px) rotateX(682deg) rotateY(318deg) rotateZ(111deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(9) {
  transform: translate3d(-123.5416666667px, -313.8888888889px, 99.375px) rotateX(343deg) rotateY(102deg) rotateZ(451deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(17) {
  transform: translate3d(340.0694444444px, 249.9305555556px, 66.8055555556px) rotateX(540deg) rotateY(495deg) rotateZ(222deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(17) {
  transform: translate3d(-279.8611111111px, 260.2777777778px, -189.0972222222px) rotateX(388deg) rotateY(219deg) rotateZ(163deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(17) {
  transform: translate3d(-204.7222222222px, -255.2083333333px, -138.6805555556px) rotateX(148deg) rotateY(639deg) rotateZ(503deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(17) {
  transform: translate3d(-87.0138888889px, 301.4583333333px, 308.3333333333px) rotateX(654deg) rotateY(553deg) rotateZ(663deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(2) {
  transform: translate3d(-182.2222222222px, -101.5972222222px, 28.3333333333px) rotateX(636deg) rotateY(615deg) rotateZ(508deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(2) {
  transform: translate3d(57.4305555556px, -44.3055555556px, -342.0138888889px) rotateX(7deg) rotateY(15deg) rotateZ(625deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(2) {
  transform: translate3d(-342.8472222222px, -33.4722222222px, -319.0972222222px) rotateX(615deg) rotateY(608deg) rotateZ(670deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(2) {
  transform: translate3d(-257.9861111111px, -297.7083333333px, 310.3472222222px) rotateX(230deg) rotateY(192deg) rotateZ(375deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(10) {
  transform: translate3d(273.8888888889px, 335.0694444444px, -113.8194444444px) rotateX(474deg) rotateY(192deg) rotateZ(192deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(10) {
  transform: translate3d(92.7777777778px, -52.1527777778px, -242.8472222222px) rotateX(24deg) rotateY(268deg) rotateZ(383deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(10) {
  transform: translate3d(340.9027777778px, -262.2222222222px, 134.5833333333px) rotateX(126deg) rotateY(331deg) rotateZ(213deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(10) {
  transform: translate3d(-330.6944444444px, -2.7777777778px, -177.5px) rotateX(214deg) rotateY(715deg) rotateZ(587deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(18) {
  transform: translate3d(-150.7638888889px, -249.6527777778px, 234.8611111111px) rotateX(498deg) rotateY(173deg) rotateZ(31deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(18) {
  transform: translate3d(-20.6944444444px, -228.1944444444px, -312.5694444444px) rotateX(712deg) rotateY(165deg) rotateZ(526deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(18) {
  transform: translate3d(104.7222222222px, 105.6944444444px, -63.8194444444px) rotateX(352deg) rotateY(342deg) rotateZ(201deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(18) {
  transform: translate3d(298.6111111111px, -32.9166666667px, 316.5972222222px) rotateX(571deg) rotateY(547deg) rotateZ(276deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(3) {
  transform: translate3d(-338.125px, 332.9166666667px, 136.3194444444px) rotateX(497deg) rotateY(518deg) rotateZ(363deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(3) {
  transform: translate3d(183.6805555556px, -343.9583333333px, 170.9027777778px) rotateX(37deg) rotateY(144deg) rotateZ(688deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(3) {
  transform: translate3d(-161.25px, 84.5833333333px, -146.1111111111px) rotateX(620deg) rotateY(503deg) rotateZ(276deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(3) {
  transform: translate3d(330.1388888889px, -228.6805555556px, -149.7222222222px) rotateX(592deg) rotateY(188deg) rotateZ(489deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(11) {
  transform: translate3d(109.6527777778px, 23.4027777778px, 50.8333333333px) rotateX(284deg) rotateY(315deg) rotateZ(555deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(11) {
  transform: translate3d(-173.8888888889px, 66.5972222222px, 155.9722222222px) rotateX(498deg) rotateY(354deg) rotateZ(252deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(11) {
  transform: translate3d(180.3472222222px, -21.875px, -211.1805555556px) rotateX(253deg) rotateY(1deg) rotateZ(84deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(11) {
  transform: translate3d(29.6527777778px, -119.5833333333px, -284.0277777778px) rotateX(150deg) rotateY(239deg) rotateZ(450deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(19) {
  transform: translate3d(-321.3194444444px, -329.7222222222px, 282.4305555556px) rotateX(50deg) rotateY(342deg) rotateZ(77deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(19) {
  transform: translate3d(-90.4861111111px, -21.5972222222px, -228.6805555556px) rotateX(633deg) rotateY(94deg) rotateZ(652deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(19) {
  transform: translate3d(-15px, -324.9305555556px, -123.4722222222px) rotateX(459deg) rotateY(685deg) rotateZ(218deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(19) {
  transform: translate3d(18.1944444444px, -185.9722222222px, 339.0972222222px) rotateX(589deg) rotateY(162deg) rotateZ(289deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(4) {
  transform: translate3d(316.7361111111px, -156.7361111111px, 267.2916666667px) rotateX(614deg) rotateY(56deg) rotateZ(290deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(4) {
  transform: translate3d(135.9027777778px, 56.3194444444px, 241.1111111111px) rotateX(510deg) rotateY(657deg) rotateZ(179deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(4) {
  transform: translate3d(165px, -326.1805555556px, -258.8194444444px) rotateX(192deg) rotateY(85deg) rotateZ(238deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(4) {
  transform: translate3d(196.5277777778px, 216.9444444444px, -65.5555555556px) rotateX(354deg) rotateY(45deg) rotateZ(720deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(12) {
  transform: translate3d(67.0833333333px, -66.3194444444px, 160px) rotateX(147deg) rotateY(557deg) rotateZ(531deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(12) {
  transform: translate3d(-278.9583333333px, 316.7361111111px, 207.9166666667px) rotateX(562deg) rotateY(249deg) rotateZ(654deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(12) {
  transform: translate3d(232.7777777778px, 42.3611111111px, 30.4166666667px) rotateX(148deg) rotateY(335deg) rotateZ(626deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(12) {
  transform: translate3d(-145.2777777778px, 111.25px, -181.7361111111px) rotateX(651deg) rotateY(160deg) rotateZ(295deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(20) {
  transform: translate3d(-220.4166666667px, 342.9861111111px, 292.2916666667px) rotateX(538deg) rotateY(66deg) rotateZ(127deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(20) {
  transform: translate3d(3.6111111111px, -75px, 284.5138888889px) rotateX(269deg) rotateY(251deg) rotateZ(6deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(20) {
  transform: translate3d(98.3333333333px, -343.8888888889px, -17.8472222222px) rotateX(118deg) rotateY(113deg) rotateZ(340deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(20) {
  transform: translate3d(-196.5972222222px, 42.0833333333px, -293.8194444444px) rotateX(207deg) rotateY(126deg) rotateZ(188deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(5) {
  transform: translate3d(87.2222222222px, -165.4166666667px, 255.9722222222px) rotateX(58deg) rotateY(298deg) rotateZ(164deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(5) {
  transform: translate3d(-273.8194444444px, 107.4305555556px, 277.6388888889px) rotateX(640deg) rotateY(279deg) rotateZ(57deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(5) {
  transform: translate3d(45.4861111111px, -67.5px, 163.4027777778px) rotateX(509deg) rotateY(542deg) rotateZ(349deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(5) {
  transform: translate3d(-194.0972222222px, 87.4305555556px, 231.9444444444px) rotateX(411deg) rotateY(445deg) rotateZ(266deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(13) {
  transform: translate3d(-205.9027777778px, 43.4027777778px, -274.5138888889px) rotateX(138deg) rotateY(571deg) rotateZ(377deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(13) {
  transform: translate3d(-194.9305555556px, -201.1111111111px, -104.0972222222px) rotateX(154deg) rotateY(27deg) rotateZ(720deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(13) {
  transform: translate3d(-120.625px, -28.5416666667px, 303.0555555556px) rotateX(541deg) rotateY(253deg) rotateZ(176deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(13) {
  transform: translate3d(63.9583333333px, -102.7083333333px, 111.875px) rotateX(276deg) rotateY(184deg) rotateZ(582deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(21) {
  transform: translate3d(-174.5833333333px, -187.0833333333px, 167.5px) rotateX(318deg) rotateY(264deg) rotateZ(121deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(21) {
  transform: translate3d(-216.25px, -38.8194444444px, -105.7638888889px) rotateX(423deg) rotateY(515deg) rotateZ(605deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(21) {
  transform: translate3d(-63.3333333333px, -88.6805555556px, -310.7638888889px) rotateX(288deg) rotateY(553deg) rotateZ(67deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(21) {
  transform: translate3d(68.4722222222px, -318.9583333333px, -213.6805555556px) rotateX(196deg) rotateY(283deg) rotateZ(549deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(6) {
  transform: translate3d(-198.2638888889px, 5.2083333333px, -325.2083333333px) rotateX(336deg) rotateY(525deg) rotateZ(60deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(6) {
  transform: translate3d(285.7638888889px, 109.9305555556px, -28.75px) rotateX(78deg) rotateY(234deg) rotateZ(74deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(6) {
  transform: translate3d(333.75px, 220.7638888889px, -332.7777777778px) rotateX(648deg) rotateY(533deg) rotateZ(321deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(6) {
  transform: translate3d(3.0555555556px, -304.375px, 34.8611111111px) rotateX(502deg) rotateY(651deg) rotateZ(318deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(14) {
  transform: translate3d(307.2916666667px, -227.7083333333px, -56.5277777778px) rotateX(637deg) rotateY(175deg) rotateZ(311deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(14) {
  transform: translate3d(-297.9166666667px, 16.7361111111px, -208.4722222222px) rotateX(203deg) rotateY(334deg) rotateZ(39deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(14) {
  transform: translate3d(77.6388888889px, 224.375px, 41.3194444444px) rotateX(32deg) rotateY(82deg) rotateZ(356deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(14) {
  transform: translate3d(-328.0555555556px, -161.5972222222px, 97.5px) rotateX(274deg) rotateY(109deg) rotateZ(101deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(22) {
  transform: translate3d(-8.9583333333px, -303.0555555556px, 226.0416666667px) rotateX(551deg) rotateY(222deg) rotateZ(91deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(22) {
  transform: translate3d(292.4305555556px, 160px, -239.0277777778px) rotateX(455deg) rotateY(252deg) rotateZ(532deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(22) {
  transform: translate3d(-98.125px, 266.875px, 184.2361111111px) rotateX(387deg) rotateY(667deg) rotateZ(424deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(22) {
  transform: translate3d(292.9861111111px, -122.7083333333px, -120.625px) rotateX(376deg) rotateY(682deg) rotateZ(451deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(7) {
  transform: translate3d(199.0277777778px, 344.6527777778px, -280.9027777778px) rotateX(401deg) rotateY(680deg) rotateZ(673deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(7) {
  transform: translate3d(-6.5972222222px, 315.4861111111px, 91.9444444444px) rotateX(334deg) rotateY(624deg) rotateZ(402deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(7) {
  transform: translate3d(84.4444444444px, -158.6111111111px, 200.4861111111px) rotateX(298deg) rotateY(200deg) rotateZ(693deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(7) {
  transform: translate3d(314.375px, -317.0833333333px, 76.5972222222px) rotateX(587deg) rotateY(513deg) rotateZ(290deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(15) {
  transform: translate3d(-336.1805555556px, -61.0416666667px, 33.0555555556px) rotateX(206deg) rotateY(538deg) rotateZ(668deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(15) {
  transform: translate3d(-116.875px, 300.9027777778px, 193.6111111111px) rotateX(720deg) rotateY(515deg) rotateZ(367deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(15) {
  transform: translate3d(-185px, 233.0555555556px, 68.5416666667px) rotateX(408deg) rotateY(201deg) rotateZ(35deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(15) {
  transform: translate3d(60.8333333333px, 272.3611111111px, -39.5833333333px) rotateX(647deg) rotateY(610deg) rotateZ(198deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(23) {
  transform: translate3d(-71.3888888889px, 240.625px, 95.7638888889px) rotateX(484deg) rotateY(339deg) rotateZ(79deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(23) {
  transform: translate3d(250.6944444444px, 28.3333333333px, -24.5833333333px) rotateX(14deg) rotateY(714deg) rotateZ(593deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(23) {
  transform: translate3d(166.7361111111px, -261.875px, -260.7638888889px) rotateX(326deg) rotateY(523deg) rotateZ(471deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(23) {
  transform: translate3d(-226.25px, 14.8611111111px, 133.5416666667px) rotateX(614deg) rotateY(76deg) rotateZ(22deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(8) {
  transform: translate3d(-342.0833333333px, -124.7916666667px, 313.2638888889px) rotateX(620deg) rotateY(356deg) rotateZ(173deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(8) {
  transform: translate3d(333.0555555556px, -131.3194444444px, -264.7222222222px) rotateX(290deg) rotateY(424deg) rotateZ(34deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(8) {
  transform: translate3d(-134.7916666667px, -286.25px, 136.1111111111px) rotateX(224deg) rotateY(349deg) rotateZ(90deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(8) {
  transform: translate3d(12.2916666667px, 293.8888888889px, 118.125px) rotateX(672deg) rotateY(344deg) rotateZ(340deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(16) {
  transform: translate3d(20.1388888889px, -91.8055555556px, -147.5px) rotateX(142deg) rotateY(289deg) rotateZ(202deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(16) {
  transform: translate3d(108.75px, 56.9444444444px, 81.9444444444px) rotateX(481deg) rotateY(98deg) rotateZ(409deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(16) {
  transform: translate3d(-71.0416666667px, -113.75px, 137.2916666667px) rotateX(465deg) rotateY(439deg) rotateZ(334deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(16) {
  transform: translate3d(28.1944444444px, 288.5416666667px, 4.3055555556px) rotateX(91deg) rotateY(633deg) rotateZ(451deg);
}

input[type=checkbox]:checked + label .btn-a > div:nth-child(24) {
  transform: translate3d(147.6388888889px, -187.7083333333px, -339.375px) rotateX(564deg) rotateY(7deg) rotateZ(154deg);
}

input[type=checkbox]:checked + label .btn-b > div:nth-child(24) {
  transform: translate3d(250px, -151.8055555556px, 76.8055555556px) rotateX(631deg) rotateY(448deg) rotateZ(628deg);
}

input[type=checkbox]:not(:checked) + label .btn-c > div:nth-child(24) {
  transform: translate3d(122.1527777778px, -5.6944444444px, 200.6944444444px) rotateX(178deg) rotateY(507deg) rotateZ(573deg);
}

input[type=checkbox]:not(:checked) + label .btn-d > div:nth-child(24) {
  transform: translate3d(326.875px, -238.2638888889px, 98.3333333333px) rotateX(127deg) rotateY(37deg) rotateZ(111deg);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg