使用SCSS（Compass）实现的旋转地球仪

CSS3 Planet | earth 本例演示Compass所带来的数学函数（sin）的应用场景。

scss，math

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1998
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import "compass/css3.scss";

body { margin: 0; overflow: hidden; height: 100vh; background: black; }

$matrix: (
(2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 ),
(2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 ),
(0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ),
(0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ),
(0 0 0 0 0 0 1 0 0 0 1 1 1 1 1 1 1 0 0 0 0 0 0 1 1 0 1 1 1 1 1 0 0 0 0 0 ),
(0 0 0 0 0 1 1 1 1 1 1 1 1 0 1 1 0 0 0 1 0 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 ),
(0 0 0 0 0 1 0 1 1 1 1 1 1 0 1 0 0 0 1 1 0 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 ),
(0 0 0 0 0 0 0 1 1 1 1 1 1 0 0 0 1 0 0 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 ),
(0 0 0 0 0 0 0 1 1 1 1 1 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 ),
(0 0 0 0 0 0 0 1 1 1 1 0 0 0 0 0 1 0 0 1 1 1 1 1 1 1 1 1 0 1 0 0 0 0 0 0 ),
(0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 ),
(0 0 0 0 0 0 0 0 0 0 1 1 1 0 0 0 1 1 1 1 1 1 0 0 1 0 1 0 0 0 0 0 0 0 0 0 ),
(0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 0 0 0 1 1 1 0 0 0 0 0 0 1 0 1 1 0 0 0 0 0 ),
(0 0 0 0 0 0 0 0 0 0 0 1 1 1 0 0 0 0 1 1 1 0 0 0 0 0 0 0 1 1 0 0 0 0 0 0 ),
(0 0 0 0 0 0 0 0 0 0 0 1 1 0 0 0 0 0 1 1 0 0 0 0 0 0 0 1 1 1 1 0 0 0 0 0 ),
(0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 1 0 0 0 ),
(0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 ),
(2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 ),
(2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 ),
);

$colors: (
  0: hsl(200,100%,80%),
  1: hsl(100,100%,40%),
  2: hsl(0,0%,100%),
);

// appearance
$speed: 36s;
$size: 2.5em;

// element counter
$stripes: 36;
$items: 18;

$alpha: 0.99;
$backface: hidden;

$scaleX: 0.925;
$scaleY: 0.925;

// math stuff
$circumference: ($items + 0)*$size*2;
$diameter: $circumference/pi();
$radius: $diameter/2;

.pane {
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 0 1px;
  height: $diameter;
  width: $diameter;
  margin: $diameter/-2;
  perspective: 700px;
  visibility: hidden;
  outline: 1px solid red;
 
  div {
    transform-style: preserve-3d;
    visibility: hidden;
  }
}
.ball {
  position: absolute;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 0 1px;
  height: $diameter;
  width: $diameter;
  margin: $diameter/-2;
  transform: rotate3d(1,1,0,-90deg); 
  animation: rot $speed linear infinite;
    
  @keyframes rot {
    0% {
      transform: 
        rotate3d(1,1,0,-90deg) 
        rotate3d(-1,-1,0,15deg)
        rotate3d(0,0,0,360deg); 
    }
    /*50% {
      transform: 
        rotate3d(1,1,0,-90deg) 
        rotate3d(-1,-1,0,15deg) 
        rotate3d(0,0,-1,180deg); 
    }*/
    100% {
      transform: 
        rotate3d(1,1,0,-90deg) 
        rotate3d(-1,-1,0,15deg)
        rotate3d(0,0,-1,360deg); 
    }
  }
  
  .stripe {
    position: absolute;
    top: 50%;
    left: 50%;
    height: $diameter;
    width: $size;
    margin: $diameter/-2 $size/-2;
    
    @for $i from 0 to $stripes {
      &:nth-child(#{$i + 1}) {
        transform: rotate(360deg/$stripes*$i);
      }
    }
  }
  
  .item {
    position: absolute;
    top: 50%;
    left: 50%;
    height: $size;
    width: $size;
    margin: $size/-2;
    //border-radius: 100%;
    background: hsla(200,100%,50%,0.99);
    visibility: visible;
    backface-visibility: $backface;
    
    &:first-child,
    &:last-child {
      height: $size/2;
    }
    
    @for $i from 0 to ($items + 1) {
      &:nth-child(#{$i + 1}) {
        $width: abs($size);
        $prev-width: abs($size);

@if $i == 0 or $i == $items {
          $width: 0;
        }
        
        @if $i > ceil($items/2) + 1 {
         $width: abs($size*sin(360deg/$stripes*($i + 0.5)));
          $prev-width: abs($size*sin(360deg/$stripes*($i - 0.5)));
        }
        
        @if $i == ceil($items/2) + 1 {
          $prev-width: $width;
        }
        
        $gap: ($prev-width - $width)/2;

@if $i > $items/2 {
          clip-path: polygon(
            $gap 0%,
            0% 100%,
            100% 100%,
            $prev-width - $gap 0%,
            $gap 0%
          );
        }
        
        @if $i < $items/2 {
          clip-path: polygon(
            0% 0%,
            $gap 100%,
            $prev-width - $gap 100%,
            100% 0%,
            0% 0%
          );
        }

width: $prev-width;
        margin-left: $prev-width/-2;
        // positioning
        transform: 
          rotateX(180deg/$items*$i)
          translateZ($radius)
          scale($scaleX,$scaleY);
      }
    }
  }
}

@for $x from 0 to 36 {
  @for $y from 0 to 19 {
   .stripe:nth-child(#{$x + 1}) .item:nth-child(#{19 - $y})  {
      $item: nth(nth($matrix,$y + 1), $x + 1);
      $color: map-get($colors,$item);
      background: rgba($color,$alpha);
     
     &:hover {
        background: mix( rgba(#000,$alpha),rgba($color,$alpha), 20%);
     
     }
    }
  }
}

HTML

CSS3 Planet | earth 本例演示Compass所带来的数学函数（sin）的应用场景。

scss，math

编辑器支持Emmet

快捷键

CSS3 Planet | earth 本例演示Compass所带来的数学函数（sin）的应用场景。

scss，math

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：