使用CSS在图像上添加3D效果

我正试图在纯CSS的帮助下添加一个3D效果，我想在其中转换此图像：

（它不是一个真正的图像，但它是一个SVG表单，通过

呈现）

对于此图像：

但我不能得到确切的效果。我尝试了一些CSS技巧，但我仍然坚持以下输出：

我写的SASS是：

.three-d-effect {
    position: relative;

    &:after {
        content: "";
        position: absolute;
        top: 5%;
        left: 10%;
        width: 80%;
        height: 80%;
        border-radius: 100%;
        filter: blur(1px);
        z-index: 2;
        transform: rotateZ(40deg);
        display: block;
        background: radial-gradient(circle at 50% 80%, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 74%, white 80%, white 84%, rgba(255, 255, 255, 0) 100%);
    }
}

---

是否可以使用CSS实现所需的3D效果？

以下是我的尝试，我还使用CSS创建了箭头：

.box{
宽度：100px；
高度：100px；
背景：
url（“数据：image/svg+xml；utf8，”）65px 10px/30px 30px不重复，
径向梯度（中心圆，#ff4290 20%，透明50%），
径向梯度（右上角的圆圈，#ff97c2 15%，#ff5d9f 50%，#c4326e 65%）；
边界半径：50%；
位置：相对位置；
盒影：0 1px#c4326e；
滤光片：亮度（110%）；
}
.盒子：以前{
内容：“；
位置：绝对位置；
顶部：25px；
左：25px；
右：25px；
底部：25px；
边框：6px纯白；
左边框颜色：透明；
边界半径：50%；
}
.盒子：之后{
内容：“；
位置：绝对位置；
宽度：20px；
高度：20px；
背景：
线性梯度（#fff，#fff）左/6px 100%无重复，
线性梯度（#fff，#fff）底部/100%6px无重复；
顶部：22px；
左：29px；
}

很抱歉，Temani的回复太晚了。你真的很接近。我将尝试调整您的示例，因为您在这里使用了某种SVG，我需要添加更多信息，这些信息实际上不是图像，而是来自字体的SVG。这会有什么帮助吗？@ShashankAgrawal如果它是一个SVG，我可能可以使用它而不是使用before/after来创建效果，我可以将它添加为背景，也许它会使效果更逼真closer@Temnani我在我的应用程序中实现了你的答案，但我发现你已经硬编码了重做图标和背景色。我试图实现的是一个通用CSS类，它可以将类似3D的效果应用于任何元素（主要是图像和图标）@ShashankAgrawal generic是不可能的，如果你不提供一些约束的话。是的，考虑到你关于图标的问题，我已经对整个形状进行了硬编码，我不知道是否有可能对任何类型的图像产生通用效果。我们需要至少有一些具体的要求，如形状将始终是圆形，浅色等。。。但要创造一种我们可以应用于所有事物的效果，这是根本不可能的。一些插入框阴影应该可以做到这一点。差不多