3d炫酷地球代码css

最近在网上看到一款非常炫酷的3D地球效果，想必大家一定也很感兴趣吧。今天就来和大家分享一下这款3D炫酷地球的代码，使用的是CSS。

/* 3D炫酷地球效果CSS */
.container {
  perspective: 800px;
  transform-style: preserve-3d;
}

.earth {
  position: relative;
  width: 300px;
  height: 300px;
  transform: translateZ(-50px);
  animation: rotate 20s linear infinite;
}

.earth:before,.earth:after {
  position: absolute;
  content: '';
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: #002651;
  transform-origin: 100% 100%;
  animation: rotateBack 20s linear infinite;
}

.earth:before {
  top: 0;
  left: 0;
  transform: translate(-100%,-100%);
}

.earth:after {
  bottom: 0;
  right: 0;
  transform: translate(100%,100%);
}

@keyframes rotate {
  100% {
    transform: rotateY(360deg);
  }
}

@keyframes rotateBack {
  100% {
    transform: rotateY(360deg);
  }
}

通过上面的CSS代码中，我们可以看到这个3D炫酷地球效果的主要实现原理就是通过perspective和transform-style两个属性来实现的。perspective属性可以指定一个观察者从一个z位置观察一个平面，所以我们给container设置800px的perspective，来使得效果更加立体。transform-style:preserve-3d属性则可以让transform属性作用于子元素，从而实现立体效果。

在.earth类中，我们设置了width、height、transform等属性，并使用了rotate动画来让地球自动旋转，具有更加炫酷的效果。同时，地球上的两个半圆主要是通过:before和:after伪元素来实现的，这两个半圆同样也存在旋转效果，通过对transform和animation属性的设置，可以让这两个半圆和地球本身一起旋转，整体效果非常逼真。

好了，上面就是这款3D炫酷地球的css代码了。这个效果看起来非常震撼，是不是也让你非常心动呢？赶快试试吧！