css实现可旋转的三维口袋球效果代码
代码语言:html
所属分类:三维
代码描述:css实现可旋转的三维口袋球效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /***********************/ /***********************/ /***********************/ *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; transform-style: preserve-3d; user-select: none; -webkit-tap-highlight-color: transparent; appearance: none; font-family: "Press Start 2P", cursive; } /***********************/ /***********************/ body { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; font-weight: bolder; overflow: hidden; cursor: pointer; background-color: #6e68d8; } .face { position: absolute; } .flex { display: flex; justify-content: center; align-items: center; } /***********************/ /***********************/ .main, .sphere { position: absolute; width: 45vmin; height: 45vmin; } .main { transform: perspective(1200vmin) rotateX(70deg) rotateZ(40deg) translateZ(-21vmin); transition: transform 200ms ease-out; } .shadow { position: absolute; width: 100%; height: 100%; transform: translateZ(-6vmin); border-radius: 50%; background-color: #473fce; filter: blur(1.5vmin); } .sphere::before, .sphere::after { content: ""; position: absolute; width: 6vmin; height: 6vmin; border-radius: 50%; background-image: linear-gradient(to left, #c4c8df, #a3aacd); transform: translateZ(-1.47vmin); } .sphere::after { transform: translateZ(43.5vmin); background-image: linear-gradient(to left, #ed060f, #bc040c); } .sphere-item1 { position: absolute; width: 6vmin; height: 11.25vmin; transform: rotateY(90deg) translateX(0.6375vmin); display: flex; justify-content: center; align-items: center; position: absolute; } .sphere-item1__side { position: absolute; height: 1.875vmin; width: 6vmin; background-color: #b3b9d6; } .sphere-item1__side:nth-of-type(1) { transform: rotateX(12deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(2) { transform: rotateX(24deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(3) { transform: rotateX(36deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(4) { transform: rotateX(48deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(5) { transform: rotateX(60deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(6) { transform: rotateX(72deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(7) { transform: rotateX(84deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(8) { transform: rotateX(96deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(9) { transform: rotateX(108deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(10) { transform: rotateX(120deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(11) { transform: rotateX(132deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(12) { transform: rotateX(144deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(13) { transform: rotateX(156deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(14) { transform: rotateX(168deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(15) { transform: rotateX(180deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(16) { transform: rotateX(192deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(17) { transform: rotateX(204deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(18) { transform: rotateX(216deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(19) { transform: rotateX(228deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(20) { transform: rotateX(240deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(21) { transform: rotateX(252deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(22) { transform: rotateX(264deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(23) { transform: rotateX(276deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(24) { transform: rotateX(288deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(25) { transform: rotateX(300deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(26) { transform: rotateX(312deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(27) { transform: rotateX(324deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(28) { transform: rotateX(336deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(29) { transform: rotateX(348deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(30) { transform: rotateX(360deg) translateZ(5.625vmin) rotateY(75deg); } .sphere-item1__side:nth-of-type(1) { background-color: #e0e2ee; } .sphere-item1__side:nth-of-type(2) { background-color: #dbdeec; } .sphere-item1__side:nth-of-type(3) { background-color: #d6d9e9; } .sphere-item1__side:nth-of-type(4) { background-color: #d1d5e6; } .sphere-item1__side:nth-of-type(5) { background-color: #ccd0e4; } .sphere-item1__side:nth-of-type(6) { background-color: #c7cbe1; } .sphere-item1__side:nth-of-type(7) { background-color: #c2c7de; } .sphere-item1__side:nth-of-type(8) { background-color: #bdc2dc; } .sphere-item1__side:nth-of-type(9) { background-color: #b8bed9; } .sphere-item1__side:nth-of-type(10) { background-color: #b3b9d6; } .sphere-item1__side:nth-of-type(11) { background-color: #aeb5d4; } .sphere-item1__side:nth-of-type(12) { background-color: #a9b0d1; } .sphere-item1__side:nth-of-type(13) { background-color: #a4abce; } .sphere-item1__side:nth-of-type(14) { background-color: #9fa7cc; } .sphere-item1__side:nth-of-type(15) { background-color: #9aa2c9; } .sphere-item1__side:nth-last-of-type(1) { background-color: #e0e2ee; } .sphere-item1__side:nth-last-of-type(2) { background-color: #dbdeec; } .sphere-item1__side:nth-last-of-type(3) { background-color: #d6d9e9; } .sphere-item1__side:nth-last-of-type(4) { background-color: #d1d5e6; } .sphere-item1__side:nth-last-of-type(5) { background-color: #ccd0e4; } .sphere-item1__side:nth-last-of-type(6) { background-color: #c7cbe1; } .sphere-item1__side:nth-last-of-type(7) { background-color: #c2c7de; } .sphere-item1__side:nth-last-of-type(8) { background-color: #bdc2dc; } .sphere-item1__side:nth-last-of-type(9) { background-color: #b8bed9; } .sphere-item1__side:nth-last-of-type(10) { background-color: #b3b9d6; } .sphere-item1__side:nth-last-of-type(11) { background-color: #aeb5d4; } .sphere-item1__side:nth-last-of-type(12) { background-color: #a9b0d1; } .sphere-item1__side:nth-last-of-type(13) { background-color: #a4abce; } .sphere-item1__side:nth-last-of-type(14) { background-color: #9fa7cc; } .sphere-item1__side:nth-last-of-type(15) { background-color: #9aa2c9; } .sphere-item1__side { clip-path: polygon(0 0, 100% 27%, 100% 73%, 0% 100%); } .sphere-item2 { position: absolute; width: 6vmin; height: 22.05vmin; transform: rotateY(90deg) translateX(-1.65vmin); display: flex; justify-content: center; align-items: center; position: absolute; } .sphere-item2__side { position: absolute; height: 2.94vmin; width: 6vmin; background-color: #b3b9d6; } .sphere-item2__side:nth-of-type(1) { transform: rotateX(12deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(2) { transform: rotateX(24deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(3) { transform: rotateX(36deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(4) { transform: rotateX(48deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(5) { transform: rotateX(60deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(6) { transform: rotateX(72deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(7) { transform: rotateX(84deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(8) { transform: rotateX(96deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(9) { transform: rotateX(108deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(10) { transform: rotateX(120deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(11) { transform: rotateX(132deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(12) { transform: rotateX(144deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(13) { transform: rotateX(156deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(14) { transform: rotateX(168deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(15) { transform: rotateX(180deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(16) { transform: rotateX(192deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(17) { transform: rotateX(204deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(18) { transform: rotateX(216deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(19) { transform: rotateX(228deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(20) { transform: rotateX(240deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(21) { transform: rotateX(252deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(22) { transform: rotateX(264deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(23) { transform: rotateX(276deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(24) { transform: rotateX(288deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(25) { transform: rotateX(300deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(26) { transform: rotateX(312deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(27) { transform: rotateX(324deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(28) { transform: rotateX(336deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(29) { transform: rotateX(348deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(30) { transform: rotateX(360deg) translateZ(11.025vmin) rotateY(60deg); } .sphere-item2__side:nth-of-type(1) { background-color: #e0e2ee; } .sphere-item2__side:nth-of-type(2) { background-color: #dbdeec; } .sphere-item2__side:nth-of-type(3) { background-color: #d6d9e9; } .sphere-item2__side:nth-of-type(4) { background-color: #d1d5e6; } .sphere-item2__side:nth-of-type(5) { background-color: #ccd0e4; } .sphere-item2__side:nth-of-type(6) { background-color: #c7cbe1; } .sphere-item2__side:nth-of-type(7) { background-color: #c2c7de; } .sphere-item2__side:nth-of-type(8) { background-color: #bdc2dc; } .sphere-item2__side:nth-of-type(9) { background-color: #b8bed9; } .sphere-item2__side:nth-of-type(10) { background-color: #b3b9d6; } .sphere-item2__side:nth-of-type(11) { background-color: #aeb5d4; } .sphere-item2__side:nth-of-type(12) { background-color: #a9b0d1; } .sphere-item2__side:nth-of-type(13) { background-color: #a4abce; } .sphere-item2__side:nth-of-type(14) { background-color: #9fa7cc; } .sphere-item2__side:nth-of-type(15) { background-color: #9aa2c9; } .sphere-item2__side:nth-last-of-type(1) { background-color: #e0e2ee; } .sphere-item2__side:nth-last-of-type(2) { background-color: #dbdeec; } .sphere-item2__side:nth-last-of-type(3) { background-color: #d6d9e9; } .sphere-item2__side:nth-last-of-type(4) { background-color: #d1d5e6; } .sphere-item2__side:nth-last-of-type(5) { background-color: #ccd0e4; } .sphere-item2__side:nth-last-of-type(6) { background-color: #c7cbe1; } .sphere-item2__side:nth-last-of-type(7) { background-color: #c2c7de; } .sphere-item2__side:nth-last-of-type(8) { background-color: #bdc2dc; } .sphere-item2__side:nth-last-of-type(9) { background-color: #b8bed9; } .sphere-item2__side:nth-last-of-type(10) { background-color: #b3b9d6; } .sphere-item2__side:nth-last-of-type(11) { background-color: #aeb5d4; } .sphere-item2__side:nth-last-of-type(12) { background-color: #a9b0d1; } .sphere-item2__side:nth-last-of-type(13) { background-color: #a4abce; } .sphere-item2__side:nth-last-of-type(14) { background-color: #9fa7cc; } .sphere-item2__side:nth-last-of-type(15) { background-color: #9aa2c9; } .sphere-item2__side { clip-path: polygon(0 0, 100% 16%, 100% 86%, 0% 100%); } .sphere-item3 { position: absolute; width: 6vmin; height: 31.35vmin; transform: rotateY(90deg) translateX(-5.1vmin); display: flex; justify-content: center; align-items: center; position: absolute; } .sphere-item3__side { position: absolute; height: 3.89785vmin; width: 6vmin; background-color: #b3b9d6; } .sphere-item3__side:nth-of-type(1) { transform: rotateX(12deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(2) { transform: rotateX(24deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(3) { transform: rotateX(36deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(4) { transform: rotateX(48deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(5) { transform: rotateX(60deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(6) { transform: rotateX(72deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(7) { transform: rotateX(84deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(8) { transform: rotateX(96deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(9) { transform: rotateX(108deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(10) { transform: rotateX(120deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(11) { transform: rotateX(132deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(12) { transform: rotateX(144deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(13) { transform: rotateX(156deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(14) { transform: rotateX(168deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(15) { transform: rotateX(180deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(16) { transform: rotateX(192deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(17) { transform: rotateX(204deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(18) { transform: rotateX(216deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(19) { transform: rotateX(228deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(20) { transform: rotateX(240deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(21) { transform: rotateX(252deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(22) { transform: rotateX(264deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(23) { transform: rotateX(276deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(24) { transform: rotateX(288deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(25) { transform: rotateX(300deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(26) { transform: rotateX(312deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(27) { transform: rotateX(324deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(28) { transform: rotateX(336deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(29) { transform: rotateX(348deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(30) { transform: rotateX(360deg) translateZ(15.675vmin) rotateY(48deg); } .sphere-item3__side:nth-of-type(1) { background-color: #e0e2ee; } .sphere-item3__side:nth-of-type(2) { background-color: #dbdeec; } .sphere-item3__side:nth-of-type(3) { background-color: #d6d9e9; } .sphere-item3__side:nth-of-type(4) { background-color: #d1d5e6; } .sphere-item3__side:nth-of-type(5) { background-color: #ccd0e4; } .sphere-item3__side:nth-of-type(6) { background-color: #c7cbe1; } .sphere-item3__side:nth-of-type(7) { background-color: #c2c7de; } .sphere-item3__side:nth-of-type(8) { background-color: #bdc2dc; } .sphere-item3__side:nth-of-type(9) { background-color: #b8bed9; } .sphere-item3__side:nth-of-type(10) { background-color: #b3b9d6; } .sphere-item3__side:nth-of-type(11) { background-color: #aeb5d4; } .sphere-item3__side:nth-of-type(12) { background-color: #a9b0d1; } .sphere-item3__side:nth-of-type(13) { background-color: #a4abce; } .sphere-item3__side:nth-of-type(14) { background-color: #9fa7cc; } .sphere-item3__side:nth-of-type(15) { background-color: #9aa2c9; } .sphere-item3__side:nth-last-of-type(1) { background-color: #e0e2ee; } .sphere-item3__side:nth-last-of-type(2) { background-color: #dbdeec; } .sphere-item3__side:nth-last-of-type(3) { background-color: #d6d9e9; } .sphere-item3__side:nth-last-of-type(4) { background-color: #d1d5e6; } .sphere-item3__side:nth-last-of-type(5) { background-color: #ccd0e4; } .sphere-item3__side:nth-last-of-type(6) { background-color: #c7cbe1; } .sphere-item3__side:nth-last-of-type(7) { background-color: #c2c7de; } .sphere-item3__side:nth-last-of-type(8) { background-color: #bdc2dc; } .sphere-item3__side:nth-last-of-type(9) { background-color: #b8bed9; } .sphere-item3__side:nth-last-of-type(10) { background-color: #b3b9d6; } .sphere-item3__side:nth-last-of-type(11) { background-color: #aeb5d4; } .sphere-item3__side:nth-last-of-type(12) { background-color: #a9b0d1; } .sphere-item3__side:nth-last-of-type(13) { background-color: #a4abce; } .sphere-item3__side:nth-last-of-type(14) { background-color: #9fa7cc; } .sphere-item3__side:nth-last-of-type(15) { background-color: #9aa2c9; } .sphere-item3__side { clip-path: polygon(0 0, 100% 13%, 100% 87%, 0% 100%); } .sphere-item4 { position: absolute; width: 6vmin; height: 38.475vmin; transform: rotateY(90deg) translateX(-9.6vmin); display: flex; justify-content: center; align-items: center; position: absolute; } .sphere-item4__side { position: absolute; height: 4.617vmin; width: 6vmin; background-color: #b3b9d6; } .sphere-item4__side:nth-of-type(1) { transform: rotateX(12deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(2) { transform: rotateX(24deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(3) { transform: rotateX(36deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(4) { transform: rotateX(48deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(5) { transform: rotateX(60deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(6) { transform: rotateX(72deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(7) { transform: rotateX(84deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(8) { transform: rotateX(96deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(9) { transform: rotateX(108deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(10) { transform: rotateX(120deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(11) { transform: rotateX(132deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(12) { transform: rotateX(144deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(13) { transform: rotateX(156deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(14) { transform: rotateX(168deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(15) { transform: rotateX(180deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(16) { transform: rotateX(192deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(17) { transform: rotateX(204deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(18) { transform: rotateX(216deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(19) { transform: rotateX(228deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(20) { transform: rotateX(240deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(21) { transform: rotateX(252deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(22) { transform: rotateX(264deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(23) { transform: rotateX(276deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(24) { transform: rotateX(288deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(25) { transform: rotateX(300deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(26) { transform: rotateX(312deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(27) { transform: rotateX(324deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(28) { transform: rotateX(336deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(29) { transform: rotateX(348deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(30) { transform: rotateX(360deg) translateZ(19.2375vmin) rotateY(28deg); } .sphere-item4__side:nth-of-type(1) { background-color: #e0e2ee; } .sphere-item4__side:nth-of-type(2) { background-color: #dbdeec; } .sphere-item4__side:nth-of-type(3) { background-color: #d6d9e9; } .sphere-item4__side:nth-of-type(4) { background-color: #d1d5e6; } .sphere-item4__side:nth-of-type(5) { background-color: #ccd0e4; } .sphere-item4__side:nth-of-type(6) { background-color: #c7cbe1; } .sphere-item4__side:nth-of-type(7) { background-color: #c2c7de; } .sphere-item4__side:nth-of-type(8) { background-color: #bdc2dc; } .sphere-item4__side:nth-of-type(9) { background-color: #b8bed9; } .sphere-item4__side:nth-of-type(10) { background-color: #b3b9d6; } .sphere-item4__side:nth-of-type(11) { background-color: #aeb5d4; } .sphere-item4__side:nth-of-type(12) { background-color: #a9b0d1; } .sphere-item4__side:nth-of-type(13) { background-color: #a4abce; } .sphere-item4__side:nth-of-type(14) { background-color: #9fa7cc; } .sphere-item4__side:nth-of-type(15) { background-color: #9aa2c9; } .sphere-item4__side:nth-last-of-type(1) { background-color: #e0e2ee; } .sphere-item4__side:nth-last-of-type(2) { background-color: #dbdeec; } .sphere-item4__side:nth-last-of-type(3) { background-color: #d6d9e9; } .sphere-item4__side:nth-last-of-type(4) { background-color: #d1d5e6; } .sphere-item4__side:nth-last-of-type(5) { background-color: #ccd0e4; } .sphere-item4__side:nth-last-of-type(6) { background-color: #c7cbe1; } .sphere-item4__side:nth-last-of-type(7) { background-color: #c2c7de; } .sphere-item4__side:nth-last-of-type(8) { background-color: #bdc2dc; } .sphere-item4__side:nth-last-of-type(9) { background-color: #b8bed9; } .sphere-item4__side:nth-last-of-type(10) { background-color: #b3b9d6; } .sphere-item4__side:nth-last-of-type(11) { background-color: #aeb5d4; } .sphere-item4__side:nth-last-of-type(12) { background-color: #a9b0d1; } .sphere-item4__side:nth-last-of-type(13) { background-color: #a4abce; } .sphere-item4__side:nth-last-of-type(14) { background-color: #9fa7cc; } .sphere-item4__side:nth-last-of-type(15) { background-color: #9aa2c9; } .sphere-item4__side { clip-path: polygon(0 0, 100% 8%, 100% 92%, 0% 100%); } .sphere-item5 { position: absolute; width: 6vmin; height: 42.6vmin; transform: rotateY(90deg) translateX(-15vmin); display: flex; justify-content: center; align-items: center; position: absolute; } .sphere-item5__side { position: absolute; height: 4.899vmin; width: 6vmin; background-color: #b3b9d6; } .sphere-item5__side:nth-of-type(1) { transform: rotateX(12deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(2) { transform: rotateX(24deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(3) { transform: rotateX(36deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(4) { transform: rotateX(48deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(5) { transform: rotateX(60deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(6) { transform: rotateX(72deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(7) { transform: rotateX(84deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(8) { transform: rotateX(96deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(9) { transform: rotateX(108deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(10) { transform: rotateX(120deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(11) { transform: rotateX(132deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(12) { transform: rotateX(144deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(13) { transform: rotateX(156deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(14) { transform: rotateX(168deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(15) { transform: rotateX(180deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(16) { transform: rotateX(192deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(17) { transform: rotateX(204deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(18) { transform: rotateX(216deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(19) { transform: rotateX(228deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(20) { transform: rotateX(240deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(21) { transform: rotateX(252deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(22) { transform: rotateX(264deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(23) { transform: rotateX(276deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(24) { transform: rotateX(288deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(25) { transform: rotateX(300deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(26) { transform: rotateX(312deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(27) { transform: rotateX(324deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(28) { transform: rotateX(336deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(29) { transform: rotateX(348deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(30) { transform: rotateX(360deg) translateZ(21.3vmin) rotateY(15deg); } .sphere-item5__side:nth-of-type(1) { background-color: #e0e2ee; } .sphere-item5__side:nth-of-type(2) { background-color: #dbdeec; } .sphere-item5__side:nth-of-type(3) { background-color: #d6d9e9; } .sphere-item5__side:nth-of-type(4) { background-color: #d1d5e6; } .sphere-item5__side:nth-of-type(5) { background-color: #ccd0e4; } .sphere-item5__side:nth-of-type(6) { background-color: #c7cbe1; } .sphere-item5__side:nth-of-type(7) { background-color: #c2c7de; } .sphere-item5__side:nth-of-type(8) { background-color: #bdc2dc; } .sphere-item5__side:nth-of-type(9) { background-color: #b8bed9; } .sphere-item5__side:nth-of-type(10) { background-color: #b3b9d6; } .sphere-item5__side:nth-of-type(11) { background-color: #aeb5d4; } .sphere-item5__side:nth-of-type(12) { background-color: #a9b0d1; } .sphere-item5__side:nth-of-type(13) { background-color: #a4abce; } .sphere-item5__side:nth-of-type(14) { background-color: #9fa7cc; } .sphere-item5__side:nth-of-type(15) { background-color: #9aa2c9; } .sphere-item5__side:nth-last-of-type(1) { background-color: #e0e2ee; } .sphere-item5__side:nth-last-of-type(2) { background-color: #dbdeec; } .sphere-item5__side:nth-last-of-type(3) { background-color: #d6d9e9; } .sphere-item5__side:nth-last-of-type(4) { background-color: #d1d5e6; } .sphere-item5__side:nth-last-of-type(5) { background-color: #ccd0e4; } .sphere-item5__side:nth-last-of-type(6) { background-color: #c7cbe1; } .sphere-item5__side:nth-last-of-type(7) { background-color: #c2c7de; } .sphere-item5__side:nth-last-of-type(8) { background-color: #bdc2dc; } .sphere-item5__side:nth-last-of-type(9) { background-color: #b8bed9; } .sphere-item5__side:nth-last-of-type(10) { background-color: #b3b9d6; } .sphere-item5__side:nth-last-of-type(11) { background-color: #aeb5d4; } .sphere-item5__side:nth-last-of-type(12) { background-color: #a9b0d1; } .sphere-item5__side:nth-last-of-type(13) { background-color: #a4abce; } .sphere-item5__side:nth-last-of-type(14) { background-color: #9fa7cc; } .sphere-item5__side:nth-last-of-type(15) { background-color: #9aa2c9; } .sphere-item5__side { clip-path: polygon(0 0, 100% 5%, 100% 95%, 0% 100%); } .sphere-item6 { position: absolute; width: 6vmin; height: 42.75vmin; transform: rotateY(90deg) translateX(-21vmin); display: flex; justify-content: center; align-items: center; position: absolute; } .sphere-item6__side { position: absolute; height: 4.7025vmin; width: 6vmin; background-color: #030404; } .sphere-item6__side:nth-of-type(1) { transform: rotateX(12deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(2) { transform: rotateX(24deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(3) { transform: rotateX(36deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(4) { transform: rotateX(48deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(5) { transform: rotateX(60deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(6) { transform: rotateX(72deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(7) { transform: rotateX(84deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(8) { transform: rotateX(96deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(9) { transform: rotateX(108deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(10) { transform: rotateX(120deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(11) { transform: rotateX(132deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(12) { transform: rotateX(144deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(13) { transform: rotateX(156deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(14) { transform: rotateX(168deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(15) { transform: rotateX(180deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(16) { transform: rotateX(192deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(17) { transform: rotateX(204deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(18) { transform: rotateX(216deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(19) { transform: rotateX(228deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(20) { transform: rotateX(240deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(21) { transform: rotateX(252deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(22) { transform: rotateX(264deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(23) { transform: rotateX(276deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(24) { transform: rotateX(288deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(25) { transform: rotateX(300deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(26) { transform: rotateX(312deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(27) { transform: rotateX(324deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(28) { transform: rotateX(336deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(29) { transform: rotateX(348deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(30) { transform: rotateX(360deg) translateZ(21.375vmin) rotateY(0deg); } .sphere-item6__side:nth-of-type(1) { background-color: #232429; } .sphere-item6__side:nth-of-type(2) { background-color: #202125; } .sphere-item6__side:nth-of-type(3) { background-color: #1c1d21; } .sphere-item6__side:nth-of-type(4) { background-color: #19191d; } .sphere-item6__side:nth-of-type(5) { background-color: #151619; } .sphere-item6__side:nth-of-type(6) { background-color: #121214; } .sphere-item6__side:nth-of-type(7) { background-color: #0e0f10; } .sphere-item6__side:nth-of-type(8) { background-color: #0b0b0c; } .sphere-item6__side:nth-of-type(9) { background-color: #070708; } .sphere-item6__side:nth-of-type(10) { background-color: #030404; } .sphere-item6__side:nth-of-type(11) { background-color: black; } .sphere-item6__side:nth-of-type(12) { background-color: black; } .sphere-item6__side:nth-of-type(13) { background-color: black; } .sphere-item6__side:nth-of-type(14) { background-color: black; } .sphere-item6__side:nth-of-type(15) { background-color: black; } .sphere-item6__side:nth-last-of-type(1) { background-color: #232429; } .sphere-item6__side:nth-last-of-type(2) { background-color: #202125; } .sphere-item6__side:nth-last-of-type(3) { background-color: #1c1d21; } .sphere-item6__side:nth-last-of-type(4) { background-color: #19191d; } .sphere-item6__side:nth-last-of-type(5) { background-color: #151619; } .sphere-item6__side:nth-last-of-type(6) { background-color: #121214; } .sphere-item6__side:nth-last-of-type(7) { background-color: #0e0f10; } .sphere-item6__side:nth-last-of-type(8) { background-color: #0b0b0c; } .sphere-item6__side:nth-last-of-type(9) { background-color: #070708; } .sphere-item6__side:nth-last-of-type(10) { background-color: #030404; } .sphere-item6__side:nth-last-of-type(11) { background-color: black; } .sphere-item6__side:nth-last-of-type(12) { background-color: black; } .sphere-item6__side:nth-last-of-type(13) { background-color: black; } .sphere-item6__side:nth-last-of-type(14) { background-color: black; } .sphere-item6__side:nth-last-of-type(15) { background-color: black; } .sphere-item7 { position: absolute; width: 6vmin; height: 42.6vmin; transform: rotateY(90deg) translateX(-26.85vmin); display: flex; justify-content: center; align-items: center; position: absolute; } .sphere-item7__side { position: absolute; height: 4.899vmin; width: 6vmin; background-color: #d4050d; } .sphere-item7__side:nth-of-type(1) { transform: rotateX(12deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(2) { transform: rotateX(24deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(3) { transform: rotateX(36deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(4) { transform: rotateX(48deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(5) { transform: rotateX(60deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(6) { transform: rotateX(72deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(7) { transform: rotateX(84deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(8) { transform: rotateX(96deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(9) { transform: rotateX(108deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(10) { transform: rotateX(120deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(11) { transform: rotateX(132deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(12) { transform: rotateX(144deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(13) { transform: rotateX(156deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(14) { transform: rotateX(168deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(15) { transform: rotateX(180deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(16) { transform: rotateX(192deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(17) { transform: rotateX(204deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(18) { transform: rotateX(216deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(19) { transform: rotateX(228deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(20) { transform: rotateX(240deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(21) { transform: rotateX(252deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(22) { transform: rotateX(264deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(23) { transform: rotateX(276deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(24) { transform: rotateX(288deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(25) { transform: rotateX(300deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(26) { transform: rotateX(312deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(27) { transform: rotateX(324deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(28) { transform: rotateX(336deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(29) { transform: rotateX(348deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(30) { transform: rotateX(360deg) translateZ(21.3vmin) rotateY(-15deg); } .sphere-item7__side:nth-of-type(1) { background-color: #fa252d; } .sphere-item7__side:nth-of-type(2) { background-color: #fa1d26; } .sphere-item7__side:nth-of-type(3) { background-color: #f9161e; } .sphere-item7__side:nth-of-type(4) { background-color: #f90e17; } .sphere-item7__side:nth-of-type(5) { background-color: #f90710; } .sphere-item7__side:nth-of-type(6) { background-color: #f2060f; } .sphere-item7__side:nth-of-type(7) { background-color: #eb060e; } .sphere-item7__side:nth-of-type(8) { background-color: #e3050e; } .sphere-item7__side:nth-of-type(9) { background-color: #dc050e; } .sphere-item7__side:nth-of-type(10) { background-color: #d4050d; } .sphere-item7__side:nth-of-type(11) { background-color: #cd050d; } .sphere-item7__side:nth-of-type(12) { background-color: #c6050c; } .sphere-item7__side:nth-of-type(13) { background-color: #be050c; } .sphere-item7__side:nth-of-type(14) { background-color: #b7040b; } .sphere-item7__side:nth-of-type(15) { background-color: #af040b; } .sphere-item7__side:nth-last-of-type(1) { background-color: #fa252d; } .sphere-item7__side:nth-last-of-type(2) { background-color: #fa1d26; } .sphere-item7__side:nth-last-of-type(3) { background-color: #f9161e; } .sphere-item7__side:nth-last-of-type(4) { background-color: #f90e17; } .sphere-item7__side:nth-last-of-type(5) { background-color: #f90710; } .sphere-item7__side:nth-last-of-type(6) { background-color: #f2060f; } .sphere-item7__side:nth-last-of-type(7) { background-color: #eb060e; } .sphere-item7__side:nth-last-of-type(8) { background-color: #e3050e; } .sphere-item7__side:nth-last-of-type(9) { background-color: #dc050e; } .sphere-item7__side:nth-last-of-type(10) { background-color: #d4050d; } .sphere-item7__side:nth-last-of-type(11) { background-color: #cd050d; } .sphere-item7__side:nth-last-of-type(12) { background-color: #c6050c; } .sphere-item7__side:nth-last-of-type(13) { background-color: #be050c; } .sphere-item7__side:nth-last-of-type(14) { background-color: #b7040b; } .sphere-item7__side:nth-last-of-type(15) { background-color: #af040b; } .sphere-item7__side { clip-path: polygon(0 5%, 100% 0%, 100% 100%, 0% 95%); } .sphere-item8 { position: absolute; width: 6vmin; height: 38.475vmin; transform: rotateY(90deg) translateX(-32.4vmin); display: flex; justify-content: center; align-items: center; position: absolute; } .sphere-item8__side { position: absolute; height: 4.617vmin; width: 6vmin; background-color: #d4050d; } .sphere-item8__side:nth-of-type(1) { transform: rotateX(12deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(2) { transform: rotateX(24deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(3) { transform: rotateX(36deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(4) { transform: rotateX(48deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(5) { transform: rotateX(60deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(6) { transform: rotateX(72deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(7) { transform: rotateX(84deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(8) { transform: rotateX(96deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(9) { transform: rotateX(108deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(10) { transform: rotateX(120deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(11) { transform: rotateX(132deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(12) { transform: rotateX(144deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(13) { transform: rotateX(156deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(14) { transform: rotateX(168deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(15) { transform: rotateX(180deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(16) { transform: rotateX(192deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(17) { transform: rotateX(204deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(18) { transform: rotateX(216deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(19) { transform: rotateX(228deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(20) { transform: rotateX(240deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(21) { transform: rotateX(252deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(22) { transform: rotateX(264deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(23) { transform: rotateX(276deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(24) { transform: rotateX(288deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(25) { transform: rotateX(300deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(26) { transform: rotateX(312deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(27) { transform: rotateX(324deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(28) { transform: rotateX(336deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(29) { transform: rotateX(348deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(30) { transform: rotateX(360deg) translateZ(19.2375vmin) rotateY(-28deg); } .sphere-item8__side:nth-of-type(1) { background-color: #fa252d; } .sphere-item8__side:nth-of-type(2) { background-color: #fa1d26; } .sphere-item8__side:nth-of-type(3) { background-color: #f9161e; } .sphere-item8__side:nth-of-type(4) { background-color: #f90e17; } .sphere-item8__side:nth-of-type(5) { background-color: #f90710; } .sphere-item8__side:nth-of-type(6) { background-color: #f2060f; } .sphere-item8__side:nth-of-type(7) { background-color: #eb060e; } .sphere-item8__side:nth-of-type(8) { background-color: #e3050e; } .sphere-item8__side:nth-of-type(9) { background-color: #dc050e; } .sphere-item8__side:nth-of-type(10) { background-color: #d4050d; } .sphere-item8__side:nth-of-type(11) { background-color: #cd050d; } .sphere-item8__side:nth-of-type(12) { background-color: #c6050c; } .sphere-item8__side:nth-of-type(13) { background-color: #be050c; } .sphere-item8__side:nth-of-type(14) { background-color: #b7040b; } .sphere-item8__side:nth-of-type(15) { background-color: #af040b; } .sphere-item8__side:nth-last-of-type(1) { background-color: #fa252d; } .sphere-item8__side:nth-last-of-type(2) { background-color: #fa1d26; } .sphere-item8__side:nth-last-of-type(3) { background-color: #f9161e; } .sphere-item8__side:nth-last-of-type(4) { background-color: #f90e17; } .sphere-item8__side:nth-last-of-type(5) { background-color: #f90710; } .sphere-item8__side:nth-last-of-type(6) { background-color: #f2060f; } .sphere-item8__side:nth-last-of-type(7) { background-color: #eb060e; } .sphere-item8__side:nth-last-of-type(8) { background-color: #e3050e; } .sphere-item8__side:nth-last-of-type(9) { background-color: #dc050e; } .sphere-item8__side:nth-last-of-type(10) { background-color: #d4050d; } .sphere-item8__side:nth-last-of-type(11) { background-color: #cd050d; } .sphere-item8__side:nth-last-of-type(12) { background-color: #c6050c; } .sphere-item8__side:nth-last-of-type(13) { background-color: #be050c; } .sphere-item8__side:nth-last-of-type(14) { background-color: #b7040b; } .sphere-item8__side:nth-last-of-type(15) { background-color: #af040b; } .sphere-item8__side { clip-path: polygon(0 8%, 100% 0%, 100% 100%, 0% 92%); } .sphere-item9 { position: absolute; width: 6vmin; height: 31.35vmin; transform: rotateY(90deg) translateX(-37.05vmin); display: flex; justify-content: center; align-items: center; position: absolute; } .sphere-item9__side { position: absolute; height: 3.89785vmin; width: 6vmin; background-color: #d4050d; } .sphere-item9__side:nth-of-type(1) { transform: rotateX(12deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(2) { transform: rotateX(24deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(3) { transform: rotateX(36deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(4) { transform: rotateX(48deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(5) { transform: rotateX(60deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(6) { transform: rotateX(72deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(7) { transform: rotateX(84deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(8) { transform: rotateX(96deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(9) { transform: rotateX(108deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(10) { transform: rotateX(120deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(11) { transform: rotateX(132deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(12) { transform: rotateX(144deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(13) { transform: rotateX(156deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(14) { transform: rotateX(168deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(15) { transform: rotateX(180deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(16) { transform: rotateX(192deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(17) { transform: rotateX(204deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(18) { transform: rotateX(216deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(19) { transform: rotateX(228deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(20) { transform: rotateX(240deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(21) { transform: rotateX(252deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(22) { transform: rotateX(264deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(23) { transform: rotateX(276deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(24) { transform: rotateX(288deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(25) { transform: rotateX(300deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(26) { transform: rotateX(312deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(27) { transform: rotateX(324deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(28) { transform: rotateX(336deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(29) { transform: rotateX(348deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(30) { transform: rotateX(360deg) translateZ(15.675vmin) rotateY(-48deg); } .sphere-item9__side:nth-of-type(1) { background-color: #fa252d; } .sphere-item9__side:nth-of-type(2) { background-color: #fa1d26; } .sphere-item9__side:nth-of-type(3) { background-color: #f9161e; } .sphere-item9__side:nth-of-type(4) { background-color: #f90e17; } .sphere-item9__side:nth-of-type(5) { background-color: #f90710; } .sphere-item9__side:nth-of-type(6) { background-color: #f2060f; } .sphere-item9__side:nth-of-type(7) { background-color: #eb060e; } .sphere-item9__side:nth-of-type(8) { background-color: #e3050e; } .sphere-item9__side:nth-of-type(9) { background-color: #dc050e; } .sphere-item9__side:nth-of-type(10) { background-color: #d4050d; } .sphere-item9__side:nth-of-type(11) { background-color: #cd050d; } .sphere-item9__side:nth-of-type(12) { background-color: #c6050c; } .sphere-item9__side:nth-of-type(13) { background-color: #be050c; } .sphere-item9__side:nth-of-type(14) { background-color: #b7040b; } .sphere-item9__side:nth-of-type(15) { background-color: #af040b; } .sphere-item9__side:nth-last-of-type(1) { background-color: #fa252d; } .sphere-item9__side:nth-last-of-type(2) { background-color: #fa1d26; } .sphere-item9__side:nth-last-of-type(3) { background-color: #f9161e; } .sphere-item9__side:nth-last-of-type(4) { background-color: #f90e17; } .s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0