html – 如何在css中创建一个球体？

概述我试图用纯粹的css创建一个3D球体,但我无法生成所需的形状.我见过 cylinder,但我找不到创建实际球体的任何参考. 我目前的代码如下： .red { background-color: red;}.green { background-color: green;}.blue { background-color: blue;}.yellow { backgrou 我试图用纯粹的CSS创建一个3D球体,但我无法生成所需的形状.我见过 cylinder,但我找不到创建实际球体的任何参考.

我目前的代码如下：

.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,0.3);  content: '';  height: 45%;  wIDth: 12%;  position: absolute;  top: 4%;  left: 15%;  border-radius: 50%;  transform: rotate(40deg);}

<div ></div><div ></div><div ></div><div ></div><div ></div>

然而,

>答：这些只是2D圆形,而不是3D形状
> 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%;    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.6);    Box-shadow: 0 0 10px 2px rgba(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,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>

它可以为div的背景位置设置动画,通过使用框阴影,您可以“模仿”3D形状的阴影.

总结

以上是内存溢出为你收集整理的html – 如何在css中创建一个球体？全部内容，希望文章能够帮你解决html – 如何在css中创建一个球体？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。