Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
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
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>点击3D粉碎效果-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号