如何创建带有弯曲的 3d 形状 [关闭]

Question

我希望能够创建一个类似于钹的 3d 形状。 Here 是我想要的弯的链接。但我希望它有一个 x 和 y 轴。

这是我开始使用的基本 css：

div{
  width:300px; height:300px;  
  border:solid 5px #000;
  border-color:#000 transparent transparent transparent;
  border-radius: 50%/300px 300px 0 0;
  background-color:#FF0000;
}

使用上面的代码。它只会创建一个弯曲的边框。我需要改变自己变成一个形状。

解决方案的一个例子是提取下面例子的黑色区域，点击“眼睛”：here

如何使用纯 CSS 来创建它？我研究了可能有助于实现这一点的贝塞尔曲线和外部 JS 函数。

有人看到/有解决这个问题的方法吗？谢谢。

Answer 1

您无法真正在 css 或 svg 中创建适当的 3D 形状，因为它们在 2D 平面上运行。

但您可以创建许多 2d 平面使其看起来像 3D：

body {
  background-color: black
}
.wrapper {
  perspective: 500px;
  width: 200px;
  height: 200px;
}
.wrapper .cymbal {
  top: 175px;
  left: 175px;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateY(180deg) rotateX(90deg);
  transition: transform 2s;
}
.wrapper:hover .cymbal {
  transform: rotateY(0deg) rotateX(0deg);
}
.wrapper .cymbal div {
  position: absolute;
  border-radius: 50%;
  background-color: gold;
  border: 1px solid black;
}
.wrapper .cymbal div:nth-of-type(1) {
  width: 10px;
  height: 10px;
  transform: translateZ(20px) translate(-50%, -50%);
}
.wrapper .cymbal div:nth-of-type(2) {
  width: 15px;
  height: 15px;
  transform: translateZ(15px) translate(-50%, -50%);
}
.wrapper .cymbal div:nth-of-type(3) {
  width: 20px;
  height: 20px;
  transform: translateZ(10px) translate(-50%, -50%);
}
.wrapper .cymbal div:nth-of-type(4) {
  width: 30px;
  height: 30px;
  transform: translateZ(5px) translate(-50%, -50%);
}
.wrapper .cymbal div:nth-of-type(5) {
  width: 35px;
  height: 35px;
  transform: translateZ(0px) translate(-50%, -50%);
}
.wrapper .cymbal div:nth-of-type(6) {
  width: 56px;
  height: 56px;
  transform: translateZ(-5px) translate(-50%, -50%);
}
.wrapper .cymbal div:nth-of-type(7) {
  width: 80px;
  height: 80px;
  transform: translateZ(-10px) translate(-50%, -50%);
}

<div class="wrapper">
  <div class="cymbal">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

Answer 2

CSS 变换

可以使用 CSS 转换创建 cymbal shape，更具体地说是 perspective 转换。

要使其更加 3d，需要多个元素或使用浏览器特定的属性来获得关闭效果。

div {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  transform: perspective(400px) rotateX(50deg);
  background: radial-gradient(ellipse at center, #000000 1%, #fceabb 2%, #fccd4d 30%, #f8b500 31%, #fbdf93 100%);
  margin: 20px;
}

<div></div>