我正在尝试使用纯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效果?