我试图用纯粹的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 class="sphere red"></div> <div class="sphere green"></div> <div class="sphere blue"></div> <div class="sphere yellow"></div> <div class="sphere"></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形状的阴影.
