如何在css中创建一个球体？ [英] How to create a sphere in css?

问题描述

我尝试使用纯CSS创建3D球体，但我无法生成所需的形状。我看到了一个气缸，但我找不到任何参考来创建实际的球体

我当前的代码如下所示：

  .red {背景颜色：红色;}绿色{背景颜色：绿色}}蓝色{背景颜色：蓝色}}。 width：200px; border-radius：50％; text-align：center; vertical-align：middle; font-size：500％;位置：相对; box-shadow：inset -10px -10px 100px＃000，10px 10px 20px black，inset 0px 0px 10px black; display：inline-block; margin：5％;}。sphere :: after {background-color：rgba（255，255，255，0.3）; content：'';身高：45％ width：12％; position：absolute; top：4％;左：15％; border-radius：50％; transform：rotate（40deg）;}  

 < div class =circle red>< / div>< div class =sphere green>< / div>< div class =sphere blue>< / div>< div class = sphere yellow>< / div>< div class =sphere>< / div>  

但

• A：这些只是2D圆形， >
  
• B：我无法在3d中旋转这些（我想要旋转图像）类似于球体。

对不起，如果我错过任何东西，但我不太确定我应该去问这个。

解决方案

以下答案不是实际的3D形状。它只会给出一个轻微的3D幻觉，然而，根据你的使用情况，你可能可以假它：

  html ，body {margin：0; padding：0; background：＃222;} div {height：300px; width：300px; background：url（http://lorempixel.com/300/300）; border-radius：50％;动画：旋转3s线性无限; transform：rotate（-15deg）; position：relative;} div：before {content：; position：absolute; bottom：-50px; border-radius：50％; left：0;高度：10％; width：100％; transform：rotate（15deg）; background：rgba（0,0,0,0.6）; box-shadow：0 0 10px 2px rgba（0,0,0,0.6）; } div：after {content：;位置：绝对; z指数：12; top：0; left：0; height：100％; width：100％; border-radius：50％; box-shadow：inset -20px -20px 20px 2px＃222，inset 20px 20px 20px 5px rgba（200,200,200,0.4） ; } @keyframes spin {to {background-position：-300px 0;}}  

 < script src =https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js>< / script>< div>< / div>  

-position ，使用框阴影，你可以模仿3D形状的阴影。

I have trying to create a 3D sphere using just pure css, but I've been unable to generate the shape required. I've seen a cylinder but I can't find any reference to creating an actual sphere.

My current code looks like:

.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.yellow {
  background-color: yellow;
}
.sphere {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  font-size: 500%;
  position: relative;
  box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black;
  display: inline-block;
  margin: 5%;
}
.sphere::after {
  background-color: rgba(255, 255, 255, 0.3);
  content: '';
  height: 45%;
  width: 12%;
  position: absolute;
  top: 4%;
  left: 15%;
  border-radius: 50%;
  transform: rotate(40deg);
}

<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>

however,

• A: these are just 2D circles, not 3D shapes
• B: I can't rotate these in 3d (I want to have a spinning image) similar to that of a globe.

Sorry if i missed anything, but I'm not too sure where I should go to ask this.

解决方案

The below answer is not an actual 3D shape. It only gives a slight illusion of being 3D, however, depending on your use case, you may be able to 'fake' it:

html,body{margin:0;padding:0;background:#222;}
div{
    height:300px;
    width:300px;
    background:url(http://lorempixel.com/300/300);
    border-radius:50%;
    animation:spin 3s linear infinite;
    transform:rotate(-15deg);
    position:relative;
}
div:before{
    content:"";
    position:absolute;
    bottom:-50px;
    border-radius:50%;
    left:0;
    height:10%;
    width:100%;
    transform:rotate(15deg);
    background:rgba(0,0,0,0.6);
    box-shadow: 0 0 10px 2px rgba(0,0,0,0.6);
    
}
div:after{
    content:"";
    position:absolute;z-index:12;
    top:0;left:0;height:100%;width:100%;border-radius:50%;
box-shadow:inset -20px -20px 20px 2px #222, inset 20px 20px 20px 5px rgba(200,200,200,0.4);    
}
@keyframes spin{
    to{background-position:-300px 0;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div></div>

It's animating the background-position of the div, and by using box shadows, you could 'mimic' the shadowing of a 3D shape.

这篇关于如何在css中创建一个球体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！