使用CSS为图像添加3D效果

Question

使用CSS为图像添加3D效果

csscss-shapes

4

我正在尝试使用纯CSS添加3D效果，我想将这张图片转换为：

（这不是真正的图像，而是一个SVG形式的FontAwesome，使用<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效果？

- Shashank Agrawal

1

几个内嵌框阴影就可以解决问题。像 https://dev59.com/kWw05IYBdhLWcg3w72M0#27776835 这样的东西。 - jbutler483

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Temani Afif · Accepted Answer

以下是我的尝试，我还使用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>