元素内。 这个div.stage非常有用。 我们可以给它设置一些角度和阴影位置，让3D球看起来更加3D。
对它们应用一些样式代码：
.stage {
width: 300px;
height: 300px;
display: inline-block;
margin: 20px;
perspective: 1200px;
perspective-origin: 50% 50%;
}
.ball .shadow {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
transform: rotateX(90deg) translateZ(-150px);
z-index: -1;
}
请注意，这里演示的代码没有浏览器前缀，但 Codepen 上的示例都带有前缀。 在前面的示例中，div.stage 的透视值为 1200px。 这种透视属性对于 3D 变形至关重要。 此属性设置观看者的位置并将视觉内容映射到视锥体上，视锥体又被投影到 2D 观看平面上。 如果没有指定透视，则Z轴空间中的所有点都将平铺到同一个2D观察平面中，并且变换结果上将没有白平衡的概念。 简而言之，透视使舞台看起来像是在 3D 场景中。
关于perspective属性的详细介绍，可以阅读《Transform-style与Perspective属性》。
然后使用渐变为球制作阴影，并对其设置变换效果以变换阴影位置。 您可以使用旋转、缩放、平移或倾斜来更改 3D 空间中的阴影位置。 球体的阴影在 X 轴上旋转 90 度，然后在 Z 轴上向上推 150 像素。
我们给stage容器舞台设置一个透视值，往下看就可以看到一个椭圆形。
现在效果看起来比以前好多了，所以给它添加更多材质效果，让它看起来更像一个 3D 球。
染色
在现实世界中，您很难从某个角度找到物体。 表示光从其他表面反射并最终与不同光源混合。 使用伪元素添加两个渐变效果，使其看起来像是两个光源组合在一起，创建了一个更真实的球体。
.ball {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
background: radial-gradient(circle at 50% 120%, #81e8f6, #76deef 10%, #055194 80%, #062745 100%);
}
.ball:before {
content: "";
position: absolute;
top: 1%;
left: 5%;
width: 90%;
height: 90%;
border-radius: 50%;
background: radial-gradient(circle at 50% 0px, #ffffff, rgba(255, 255, 255, 0) 58%);
filter: blur(5px);
z-index: 2;
}
上面使用了两个稍微复杂的渐变。
在球元素上使用渐变来创建低光效果，渐变的中心位于元素的 (50% 120%) 位置。 这样做可以使最终颜色不那么明显，并且渐变看起来更平滑。
第二个渐变位于底部，更亮，并且是球体宽度和高度的 90%。 渐变以圆心为中心，向下逐渐消失。
这里我们使用 :before 创建阴影而不是创建新元素。
由于渐变有锐利的边缘效果，我们过去常常用模糊来柔化锐利的边缘，不让它看起来那么突出。 不幸的是，到目前为止，这个属性只有Webkit核心浏览器（Chrome和Safari）支持，但其他浏览器将来可能会支持它。
将两种渐变效果结合起来后，效果看起来更好了：
希尼尔
到目前为止，效果看起来很暗，让我们为效果添加一些光泽并创建一个九球。
为了实现这一点，我们将借助柔和的灯光调整突出物的底面。 我们需要使用两个伪元素来实现此效果。
.ball {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
border-radius: 50%;
position: relative;
background: radial-gradient(circle at 50% 120%, #323232, #0a0a0a 80%, #000000 100%);
}
.ball:before {
content: "";
position: absolute;
background: radial-gradient(circle at 50% 120%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
bottom: 2.5%;
left: 5%;
opacity: 0.6;
height: 100%;
width: 90%;
filter: blur(5px);
z-index: 2;
}
.ball:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 5%;
left: 10%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
transform: translateX(-80px) translateY(-90px) skewX(-20deg);
filter: blur(10px);
}
这里球体的初始颜色发生了毫秒的变化。 还要在:before伪类上写一个更突出的效果，它再次将光从球体顶部反射到球体表面。
接下来css3 光线，添加一个新的伪类：之后，在该伪类上使用从红色到透明（约 24%）的径向渐变。 这会产生红色闪光效果，为了使其看起来更像反射 3D 对象，我们在前面使用了 CSS 变换。
使用变换属性，将元素向左移动 80 像素 (translateX(-80px))，向下移动 90 像素 (translateY(-90px))，同时在 X 轴上将其扭曲 -20 度 (skewX(-20 度))。 这样一来，整个疗效看起来更像是一个发光的球。
8球
打9球的朋友都知道，最后必须打8球。 让我们再降低一步，创建一个 8 号球。
我们需要添加一个额外的元素来使这8的疗效：
.ball .eight {
width: 110px;
height: 110px;
margin: 30%;
background: white;
border-radius: 50%;
transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
position: absolute;
}
.ball .eight:before {
content: "8";
display: block;
position: absolute;
text-align: center;
height: 80px;
width: 100px;
left: 50px;
margin-left: -40px;
top: 44px;
margin-top: -40px;
color: black;
font-family: Arial;
font-size: 90px;
line-height: 104px;
}
为这个新创建的元素添加 border-radius:100% 样式，创建一个圆，并将圆放置在球的右上角，并为其添加一些变换样式以获得更合适的效果。 为了在球上显示数字8，您需要使用伪类：在内容之前，将其值设置为8，然后应用一些CSS样式。 最后它的效果是这样的：
添加耳朵
CSS不仅有强大的transform属性，还有animation属性，可以做出一些动画效果。 使用 CSS 关键帧，您可以为变换添加一些动画效果。 为了更好地探索这一点，让我们创建一双会旋转的眼睛。
第一步是根据上面的 8 号球示例调整一些颜色。 让它看起来更像一双眼睛。 修改后的 HTML 如下所示：
大多数 CSS 类似于制作 8 号尺寸，除了一只眼睛的膜和瞳孔。
.iris {
width: 40%;
height: 40%;
margin: 30%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, #208ab4 0%, #6fbfff 30%, #4381b2 100%);
transform: translateX(68px) translateY(-60px) skewX(15deg) skewY(2deg);
position: absolute;
animation: move-eye-skew 5s ease-out infinite;
}
.iris:before {
content: "";
display: block;
position: absolute;
width: 37.5%;
height: 37.5%;
border-radius: 50%;
top: 31.25%;
left: 31.25%;
background: black;
}
.iris:after {
content: "";
display: block;
position: absolute;
width: 31.25%;
height: 31.25%;
border-radius: 50%;
top: 18.75%;
left: 18.75%;
background: rgba(255, 255, 255, 0.2);
}
在虹膜上创建红色渐变，使其看起来像眼睛的膜，并使用伪类创建耳朵的瞳孔，使用样式使它们更亮一点。 并为其添加动画效果：
animation: animation-name 5s ease-out infinite;
本例中创建了一个名为animation-name的动画，动画持续5s，并且该动画的效果一直循环。 为了让动画看起来更自然，给动画添加ease-out功能，让动画由快变慢。
如果没有动画，我们所创建的只是一只不会转动的耳朵，如下所示：
接下来，使用关键帧创建眼球的移动方式。
@keyframes move-eye-skew {
0% {
transform: none;
}
20% {
transform: translateX(-68px) translateY(30px) skewX(15deg) skewY(-10deg) scale(0.95);
}
25%, 44% {
transform: none;
}
50%, 60% {
transform: translateX(68px) translateY(-40px) skewX(5deg) skewY(2deg) scaleX(0.95);
}
66%, 100% {
transform: none;
}
}
CSS 动画中的关键帧乍一看可能很棘手。 描述元素的不同状态通过一系列阶段正在做什么。 每个状态都由一个比率控制。 在这个例子中，它主要用于改变iris中的变换。 从 20% 开始使用变换来连接眼球。 0%和20%之间的差异是由浏览器控制的，浏览器会手动估计并让这两点实现平滑过渡。
继续控制每个帧上的变换，如上所述。 并让整个动画持续5s。
为了更好地兼容浏览器，在创建关键帧动画帧时不要忘记添加相应的浏览器前缀。
气泡
将盒子阴影和动画结合起来可以产生各种有趣的效果，例如气泡效果。
创建一个看起来与之前的球体类似的气泡效果，只是使用更透明的颜色并向伪类添加光泽效果。
同时对气泡进行变换，利用动画让整个气泡向上摆动。
@keyframes bubble-anim {
0% {
transform: scale(1);
}
20% {
transform: scaleY(0.95) scaleX(1.05);
}
48% {
transform: scaleY(1.1) scaleX(0.9);
}
68% {
transform: scaleY(0.98) scaleX(1.02);
}
80% {
transform: scaleY(1.02) scaleX(0.98);
}
97%, 100% {
transform: scale(1);
}
}
动画应用于整个气泡，具有以下效果：
使用图像
到目前为止我们看到的球体处理都没有使用任何图像。 如果使用背景图片来做球形效果，需要添加更多细节，需要使用伪元素的内阴影。 就拿下面听到的例子来说吧。
添加一些渐变效果，并添加一些光泽效果来创造一些幻觉。
地球
动画还可以用于控制背景图像的位置。 这样我们就可以创建一个旋转的地球仪效果。
例如，我们以世界地图的平面ltju作为背景：
为了更好地营造3D空间，效果中添加了一些阴影和动画。 下图疗效是@@Sidoruk_SV写的旋转地球仪：
总结
本文通过示例逐步告诉您如何使用 CSS 创建 3D 球形效果。 以及如何使用CSS box-shadow和渐变为3D球添加一些光泽效果，使球更像3D空间。 并配合CSS动画让整个小球向上移动。 前面的例子再次证明了使用box-shadow和渐变可以产生多种效果。 如果你有兴趣的话，自己尝试一下，说不定能得到更有趣的疗效。 同时，我也希望分享您所做的案例。
本文根据@Donovan 的《Spheres》翻译。 整个翻译包含了我们自己的理解和想法。 如果翻译的不好或者有错误的地方，请各位同仁不吝赐教。 如需转载此译文css3 光线，请注明中文出处：//cssanimation.rocks/spheres/。
