پیشنمایش زنده
کد HTML
<div id="cont">
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="point"></div>
<div class="continent c1"></div>
<div class="continent c2"></div>
<div class="continent c3"></div>
<div class="continent c4"></div>
<div class="continent c5"></div>
<div class="continent c6"></div>
<div class="continent c7"></div>
<div class="continent c8"></div>
<div class="continent c9"></div>
<div class="continent c10"></div>
<div class="continent c11"></div>
<div class="continent c12"></div>
<div class="continent c13"></div>
<div class="continent c14"></div>
<div class="continent c15"></div>
<div class="continent c16"></div>
<div class="continent c17"></div>
<div class="continent c18"></div>
<div class="continent c19"></div>
<div class="continent c20"></div>
<div class="continent c21"></div>
<div class="continent c22"></div>
<div class="continent c23"></div>
<div class="continent c24"></div>
<div class="continent c25"></div>
<div class="continent c26"></div>
<div class="continent c27"></div>
<div class="continent c28"></div>
<div class="continent c29"></div>
<div class="continent c30"></div>
<div class="continent c31"></div>
<div class="continent c32"></div>
<div class="continent c33"></div>
<div class="continent c34"></div>
<div class="continent c35"></div>
<div class="continent c36"></div>
<div class="continent c37"></div>
<div class="continent c38"></div>
<div class="continent c39"></div>
<div class="continent c40"></div>
<div class="continent c41"></div>
<div class="continent c42"></div>
<div class="continent c43"></div>
<div class="continent c44"></div>
<div class="continent c45"></div>
<div class="continent c46"></div>
<div class="continent c47"></div>
<div class="continent c48"></div>
<div class="continent c49"></div>
<div class="continent c50"></div>
</div>
<div class="base">
<div class="base">
<div class="base">
<div class="base">
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
<div class="base"></div>
</div>
</div>
</div>
</div>
کد CSS
#cont {
scale: 0.6;
z-index: 100;
margin: 0;
display: grid;
place-items: center;
height: 100%;
background: rgb(38, 22, 22);
perspective: 10000px;
transform-style: preserve-3d;
animation: spin 5s linear infinite;
}
.point {
position: absolute;
width: 81px;
height: 81px;
margin: -5px 0 0 -5px;
border-radius: 15%;
background: #5a90ff;
box-shadow: 0 0 1px -0.3px #ffffff53;
z-index: 100;
}
.base {
scale: 0.9;
position: absolute;
width: 324.5px;
height: 324.5px;
border-radius: 100%;
background: #60a1f514;
box-shadow: 0 0 1px -0.3px #ffffff53;
z-index: 0;
}
#green {
border-radius: 0%;
background: radial-gradient(
ellipse 8vmin 10vmin at 20% 25%,
var(--land-dark, #2a3d26) 0 70%,
#5a90ff 71%
);
z-index: 0;
}
@keyframes spin {
0% {
transform: rotateZ(90deg) rotateX(0deg);
}
50% {
transform: rotateZ(90deg) rotateX(180deg);
}
100% {
transform: rotateZ(90deg) rotateX(360deg);
}
}
/* lon-60 */
.point:nth-child(2) {
transform: rotateX(-60deg) rotateY(0deg) translateZ(150px);
}
.point:nth-child(3) {
transform: rotateX(-60deg) rotateY(30deg) translateZ(150px);
}
.point:nth-child(4) {
transform: rotateX(-60deg) rotateY(60deg) translateZ(150px);
}
.point:nth-child(5) {
transform: rotateX(-60deg) rotateY(90deg) translateZ(150px);
}
.point:nth-child(6) {
transform: rotateX(-60deg) rotateY(120deg) translateZ(150px);
}
.point:nth-child(7) {
transform: rotateX(-60deg) rotateY(150deg) translateZ(150px);
}
.point:nth-child(8) {
transform: rotateX(-60deg) rotateY(180deg) translateZ(150px);
}
.point:nth-child(9) {
transform: rotateX(-60deg) rotateY(210deg) translateZ(150px);
}
.point:nth-child(10) {
transform: rotateX(-60deg) rotateY(240deg) translateZ(150px);
}
.point:nth-child(11) {
transform: rotateX(-60deg) rotateY(270deg) translateZ(150px);
}
.point:nth-child(12) {
transform: rotateX(-60deg) rotateY(300deg) translateZ(150px);
}
.point:nth-child(13) {
transform: rotateX(-60deg) rotateY(330deg) translateZ(150px);
}
/* lon-30 */
.point:nth-child(14) {
transform: rotateX(-30deg) rotateY(0deg) translateZ(150px);
}
.point:nth-child(15) {
transform: rotateX(-30deg) rotateY(30deg) translateZ(150px);
}
.point:nth-child(16) {
transform: rotateX(-30deg) rotateY(60deg) translateZ(150px);
}
.point:nth-child(17) {
transform: rotateX(-30deg) rotateY(90deg) translateZ(150px);
}
.point:nth-child(18) {
transform: rotateX(-30deg) rotateY(120deg) translateZ(150px);
}
.point:nth-child(19) {
transform: rotateX(-30deg) rotateY(150deg) translateZ(150px);
}
.point:nth-child(20) {
transform: rotateX(-30deg) rotateY(180deg) translateZ(150px);
}
.point:nth-child(21) {
transform: rotateX(-30deg) rotateY(210deg) translateZ(150px);
}
.point:nth-child(22) {
transform: rotateX(-30deg) rotateY(240deg) translateZ(150px);
}
.point:nth-child(23) {
transform: rotateX(-30deg) rotateY(270deg) translateZ(150px);
}
.point:nth-child(24) {
transform: rotateX(-30deg) rotateY(300deg) translateZ(150px);
}
.point:nth-child(25) {
transform: rotateX(-30deg) rotateY(330deg) translateZ(150px);
}
/* lon+0 */
.point:nth-child(26) {
transform: rotateX(0deg) rotateY(0deg) translateZ(150px);
}
.point:nth-child(27) {
transform: rotateX(0deg) rotateY(30deg) translateZ(150px);
}
.point:nth-child(28) {
transform: rotateX(0deg) rotateY(60deg) translateZ(150px);
}
.point:nth-child(29) {
transform: rotateX(0deg) rotateY(90deg) translateZ(150px);
}
.point:nth-child(30) {
transform: rotateX(0deg) rotateY(120deg) translateZ(150px);
}
.point:nth-child(31) {
transform: rotateX(0deg) rotateY(150deg) translateZ(150px);
}
.point:nth-child(32) {
transform: rotateX(0deg) rotateY(180deg) translateZ(150px);
}
.point:nth-child(33) {
transform: rotateX(0deg) rotateY(210deg) translateZ(150px);
}
.point:nth-child(34) {
transform: rotateX(0deg) rotateY(240deg) translateZ(150px);
}
.point:nth-child(35) {
transform: rotateX(0deg) rotateY(270deg) translateZ(150px);
}
.point:nth-child(36) {
transform: rotateX(0deg) rotateY(300deg) translateZ(150px);
}
.point:nth-child(37) {
transform: rotateX(0deg) rotateY(330deg) translateZ(150px);
}
/* lon+30 */
.point:nth-child(38) {
transform: rotateX(30deg) rotateY(0deg) translateZ(150px);
}
.point:nth-child(39) {
transform: rotateX(30deg) rotateY(30deg) translateZ(150px);
}
.point:nth-child(40) {
transform: rotateX(30deg) rotateY(60deg) translateZ(150px);
}
.point:nth-child(41) {
transform: rotateX(30deg) rotateY(90deg) translateZ(150px);
}
.point:nth-child(42) {
transform: rotateX(30deg) rotateY(120deg) translateZ(150px);
}
.point:nth-child(43) {
transform: rotateX(30deg) rotateY(150deg) translateZ(150px);
}
.point:nth-child(44) {
transform: rotateX(30deg) rotateY(180deg) translateZ(150px);
}
.point:nth-child(45) {
transform: rotateX(30deg) rotateY(210deg) translateZ(150px);
}
.point:nth-child(46) {
transform: rotateX(30deg) rotateY(240deg) translateZ(150px);
}
.point:nth-child(47) {
transform: rotateX(30deg) rotateY(270deg) translateZ(150px);
}
.point:nth-child(48) {
transform: rotateX(30deg) rotateY(300deg) translateZ(150px);
}
.point:nth-child(49) {
transform: rotateX(30deg) rotateY(330deg) translateZ(150px);
}
/* lon+60 */
.point:nth-child(50) {
transform: rotateX(60deg) rotateY(0deg) translateZ(150px);
}
.point:nth-child(51) {
transform: rotateX(60deg) rotateY(30deg) translateZ(150px);
}
.point:nth-child(52) {
transform: rotateX(60deg) rotateY(60deg) translateZ(150px);
}
.point:nth-child(53) {
transform: rotateX(60deg) rotateY(90deg) translateZ(150px);
}
.point:nth-child(54) {
transform: rotateX(60deg) rotateY(120deg) translateZ(150px);
}
.point:nth-child(55) {
transform: rotateX(60deg) rotateY(150deg) translateZ(150px);
}
.point:nth-child(56) {
transform: rotateX(60deg) rotateY(180deg) translateZ(150px);
}
.point:nth-child(57) {
transform: rotateX(60deg) rotateY(210deg) translateZ(150px);
}
.point:nth-child(58) {
transform: rotateX(60deg) rotateY(240deg) translateZ(150px);
}
.point:nth-child(59) {
transform: rotateX(60deg) rotateY(270deg) translateZ(150px);
}
.point:nth-child(60) {
transform: rotateX(60deg) rotateY(300deg) translateZ(150px);
}
.point:nth-child(61) {
transform: rotateX(60deg) rotateY(330deg) translateZ(150px);
}
/* lon+90 */
.point:nth-child(62) {
transform: rotateX(90deg) rotateY(0deg) translateZ(150px);
}
.point:nth-child(63) {
transform: rotateX(90deg) rotateY(30deg) translateZ(150px);
}
.point:nth-child(64) {
transform: rotateX(90deg) rotateY(60deg) translateZ(150px);
}
.point:nth-child(65) {
transform: rotateX(90deg) rotateY(90deg) translateZ(150px);
}
.point:nth-child(66) {
transform: rotateX(90deg) rotateY(120deg) translateZ(150px);
}
.point:nth-child(67) {
transform: rotateX(90deg) rotateY(150deg) translateZ(150px);
}
.point:nth-child(68) {
transform: rotateX(90deg) rotateY(180deg) translateZ(150px);
}
.point:nth-child(69) {
transform: rotateX(90deg) rotateY(210deg) translateZ(150px);
}
.point:nth-child(70) {
transform: rotateX(90deg) rotateY(240deg) translateZ(150px);
}
.point:nth-child(71) {
transform: rotateX(90deg) rotateY(270deg) translateZ(150px);
}
.point:nth-child(72) {
transform: rotateX(90deg) rotateY(300deg) translateZ(150px);
}
.point:nth-child(73) {
transform: rotateX(90deg) rotateY(330deg) translateZ(150px);
}
.continent {
position: absolute;
width: 132px;
height: 132px;
background: radial-gradient(rgba(98, 172, 98, 0.9) 54%, transparent 55%);
border: 1px solid rgba(0, 0, 0, 0.525);
transform-style: preserve-3d;
}
.c1 {
clip-path: polygon(20% 0%, 90% 15%, 70% 95%, 10% 70%);
transform: rotateX(10deg) rotateY(20deg) translateZ(157px);
}
.c2 {
clip-path: polygon(15% 10%, 95% 20%, 80% 85%, 5% 70%);
transform: rotateX(12deg) rotateY(23deg) translateZ(157px);
}
.c3 {
clip-path: polygon(30% 0%, 85% 15%, 90% 80%, 15% 95%);
transform: rotateX(8deg) rotateY(18deg) translateZ(157px);
}
.c4 {
clip-path: polygon(25% 5%, 100% 25%, 75% 90%, 5% 70%);
transform: rotateX(14deg) rotateY(21deg) translateZ(157px);
}
.c5 {
clip-path: polygon(10% 25%, 90% 5%, 85% 70%, 30% 95%);
transform: rotateX(9deg) rotateY(24deg) translateZ(157px);
}
.c6 {
clip-path: polygon(20% 10%, 80% 0%, 95% 70%, 25% 95%);
transform: rotateX(11deg) rotateY(16deg) translateZ(157px);
}
.c7 {
clip-path: polygon(15% 0%, 95% 20%, 70% 100%, 5% 80%);
transform: rotateX(7deg) rotateY(22deg) translateZ(157px);
}
.c8 {
clip-path: polygon(25% 0%, 85% 15%, 100% 75%, 15% 95%);
transform: rotateX(13deg) rotateY(19deg) translateZ(157px);
}
.c9 {
clip-path: polygon(10% 10%, 90% 5%, 80% 85%, 20% 95%);
transform: rotateX(10deg) rotateY(26deg) translateZ(157px);
}
.c10 {
clip-path: polygon(20% 5%, 95% 25%, 70% 95%, 10% 75%);
transform: rotateX(6deg) rotateY(20deg) translateZ(157px);
}
.c11 {
clip-path: polygon(15% 5%, 90% 15%, 75% 95%, 5% 80%);
transform: rotateX(-20deg) rotateY(60deg) translateZ(157px);
}
.c12 {
clip-path: polygon(25% 0%, 85% 20%, 95% 75%, 10% 95%);
transform: rotateX(-22deg) rotateY(63deg) translateZ(157px);
}
.c13 {
clip-path: polygon(20% 10%, 95% 5%, 85% 80%, 15% 90%);
transform: rotateX(-18deg) rotateY(58deg) translateZ(157px);
}
.c14 {
clip-path: polygon(30% 0%, 90% 25%, 70% 95%, 5% 70%);
transform: rotateX(-21deg) rotateY(64deg) translateZ(157px);
}
.c15 {
clip-path: polygon(15% 15%, 100% 10%, 85% 85%, 20% 95%);
transform: rotateX(-19deg) rotateY(56deg) translateZ(157px);
}
.c16 {
clip-path: polygon(25% 5%, 95% 20%, 75% 90%, 10% 70%);
transform: rotateX(-23deg) rotateY(61deg) translateZ(157px);
}
.c17 {
clip-path: polygon(20% 0%, 90% 10%, 100% 70%, 15% 95%);
transform: rotateX(-17deg) rotateY(59deg) translateZ(157px);
}
.c18 {
clip-path: polygon(15% 5%, 85% 20%, 70% 85%, 5% 70%);
transform: rotateX(-24deg) rotateY(62deg) translateZ(157px);
}
.c19 {
transform: rotateX(40deg) rotateY(-30deg) translateZ(157px);
clip-path: polygon(20% 0%, 90% 20%, 80% 90%, 10% 70%);
}
.c20 {
transform: rotateX(42deg) rotateY(-28deg) translateZ(157px);
clip-path: polygon(25% 5%, 95% 20%, 70% 95%, 5% 70%);
}
.c21 {
transform: rotateX(38deg) rotateY(-32deg) translateZ(157px);
clip-path: polygon(30% 0%, 85% 15%, 100% 75%, 15% 95%);
}
.c22 {
transform: rotateX(43deg) rotateY(-27deg) translateZ(157px);
clip-path: polygon(15% 10%, 90% 5%, 80% 85%, 20% 95%);
}
.c23 {
transform: rotateX(39deg) rotateY(-29deg) translateZ(157px);
clip-path: polygon(20% 5%, 95% 25%, 70% 95%, 10% 75%);
}
.c24 {
transform: rotateX(41deg) rotateY(-31deg) translateZ(157px);
clip-path: polygon(10% 20%, 90% 10%, 85% 80%, 30% 95%);
}
.c25 {
transform: rotateX(44deg) rotateY(-33deg) translateZ(157px);
clip-path: polygon(25% 0%, 100% 20%, 75% 90%, 15% 95%);
}
.c26 {
transform: rotateX(37deg) rotateY(-34deg) translateZ(157px);
clip-path: polygon(15% 15%, 85% 5%, 95% 80%, 20% 95%);
}
.c27 {
transform: rotateX(45deg) rotateY(-29deg) translateZ(157px);
clip-path: polygon(30% 0%, 90% 15%, 80% 100%, 10% 70%);
}
.c28 {
transform: rotateX(36deg) rotateY(-35deg) translateZ(157px);
clip-path: polygon(20% 0%, 80% 10%, 95% 70%, 25% 95%);
}
.c29 {
transform: rotateX(-10deg) rotateY(150deg) translateZ(157px);
clip-path: polygon(30% 0%, 90% 20%, 70% 90%, 10% 70%);
}
.c30 {
transform: rotateX(-12deg) rotateY(153deg) translateZ(157px);
clip-path: polygon(25% 5%, 85% 15%, 95% 75%, 15% 95%);
}
.c31 {
transform: rotateX(-14deg) rotateY(156deg) translateZ(157px);
clip-path: polygon(20% 10%, 95% 0%, 80% 85%, 20% 95%);
}
.c32 {
transform: rotateX(-16deg) rotateY(159deg) translateZ(157px);
clip-path: polygon(10% 20%, 90% 5%, 85% 70%, 30% 95%);
}
.c33 {
transform: rotateX(-18deg) rotateY(162deg) translateZ(157px);
clip-path: polygon(20% 0%, 85% 15%, 100% 75%, 15% 95%);
}
.c34 {
transform: rotateX(-20deg) rotateY(165deg) translateZ(157px);
clip-path: polygon(15% 15%, 95% 5%, 90% 85%, 25% 95%);
}
.c35 {
transform: rotateX(5deg) rotateY(-150deg) translateZ(157px);
clip-path: polygon(30% 0%, 90% 20%, 70% 90%, 10% 70%);
}
.c36 {
transform: rotateX(-45deg) rotateY(120deg) translateZ(157px);
clip-path: polygon(25% 5%, 95% 20%, 70% 95%, 5% 70%);
}
.c37 {
transform: rotateX(50deg) rotateY(90deg) translateZ(157px);
clip-path: polygon(20% 10%, 95% 0%, 85% 85%, 15% 95%);
}
.c38 {
transform: rotateX(-60deg) rotateY(200deg) translateZ(157px);
clip-path: polygon(10% 20%, 90% 5%, 100% 80%, 30% 95%);
}
.c39 {
transform: rotateX(25deg) rotateY(-100deg) translateZ(157px);
clip-path: polygon(20% 0%, 80% 10%, 90% 70%, 30% 95%);
}
.c40 {
transform: rotateX(15deg) rotateY(75deg) translateZ(157px);
clip-path: polygon(15% 0%, 95% 20%, 80% 85%, 10% 70%);
}
.c41 {
transform: rotateX(-30deg) rotateY(-60deg) translateZ(157px);
clip-path: polygon(25% 0%, 85% 15%, 95% 75%, 15% 95%);
}
.c42 {
transform: rotateX(35deg) rotateY(140deg) translateZ(157px);
clip-path: polygon(10% 10%, 90% 0%, 80% 80%, 20% 95%);
}
.c43 {
transform: rotateX(60deg) rotateY(-10deg) translateZ(157px);
clip-path: polygon(30% 0%, 90% 25%, 70% 95%, 10% 75%);
}
.c44 {
transform: rotateX(-55deg) rotateY(-130deg) translateZ(157px);
clip-path: polygon(20% 5%, 95% 20%, 85% 80%, 15% 90%);
}
.c45 {
transform: rotateX(0deg) rotateY(30deg) translateZ(157px);
clip-path: polygon(25% 0%, 85% 20%, 70% 90%, 5% 70%);
}
.c46 {
transform: rotateX(-10deg) rotateY(-170deg) translateZ(157px);
clip-path: polygon(15% 15%, 95% 5%, 90% 85%, 20% 95%);
}
.c47 {
transform: rotateX(20deg) rotateY(200deg) translateZ(157px);
clip-path: polygon(20% 0%, 80% 15%, 100% 70%, 15% 95%);
}
.c48 {
transform: rotateX(-25deg) rotateY(15deg) translateZ(157px);
clip-path: polygon(30% 0%, 95% 20%, 75% 95%, 10% 70%);
}
.c49 {
transform: rotateX(45deg) rotateY(-200deg) translateZ(157px);
clip-path: polygon(10% 20%, 90% 0%, 85% 70%, 20% 95%);
}
.c50 {
transform: rotateX(-35deg) rotateY(180deg) translateZ(157px);
clip-path: polygon(25% 0%, 85% 25%, 95% 75%, 15% 95%);
}
.cloud {
position: absolute;
width: 82px;
height: 152px;
background: radial-gradient(rgba(239, 218, 233, 0.697) 54%, transparent 55%);
border: 1px solid rgba(0, 0, 0, 0.525);
transform-style: preserve-3d;
}