如何使用折弯创建3d形状

Question

我希望能够创建类似于钹的3d形状。 Here是我想要的弯道的链接。但我希望它有一个x＆amp; 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;
}

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

解决方案的一个示例是提取以下示例的黑色区域，单击＆＃34; eye＆＃34; ：here

如何使用纯CSS创建它？我已经研究了bezier曲线和＆amp;外部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变换。

为了使它不再需要多个元素或使用特定于浏览器的属性来获得近距离效果。

＆＃13;

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;