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

Question

我正在尝试在要转换此图像的纯 CSS 的帮助下添加 3D 效果：

（它不是真正的图像，而是用 FontAwesome 渲染的 SVG 形式<fa-icon icon="undo" mask="circle" transform="shrink-9"></fa-icon>）

到这张图片：

但我无法得到确切的效果。我尝试了一些 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 效果？

标签： csscss-shapes

Answer 1

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

.box {
  width: 100px;
  height: 100px;
  background: 
   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='30' height='30'  fill='lightpink'>  <path d='M6 22 L5.84 22 C30 32 36 36 54 60 C56 62 57 62 56 58 C48 34 46 28 27.16 11.17 C10 0 0 17.83 6 22.17 Z' /></svg>") 65px 10px/30px 30px no-repeat,
   radial-gradient(circle at center,#ff4290 20%,transparent 50%),
   radial-gradient(circle at top right,#ff97c2 15%,#ff5d9f 50%,#c4326e 65%);
  border-radius: 50%;
  position: relative;
  box-shadow:0 0 1px #c4326e;
  filter: brightness(110%);
}

.box:before {
  content: "";
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  bottom: 25px;
  border: 6px solid white;
  border-left-color: transparent;
  border-radius: 50%;
}

.box:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: 
   linear-gradient(#fff, #fff) left/6px 100% no-repeat, 
   linear-gradient(#fff, #fff) bottom/100% 6px no-repeat;
  top: 22px;
  left: 29px;
}

<div class="box">

</div>