如何创建带有边框的3D图像？

Question

从图像中我必须将其显示为绘画，并在其上放置框架（所有这些都具有3D透视图）。这就是图像的外观，就像一幅画：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9qOTMzUS5wbmcifQ==” alt =“像一幅画一样的图像”>

这是框架的外观：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8weFZ3TS5qcGcifQ==” alt =“带有框架的图像像” >>

这里是我的代码，到目前为止只有看起来像图片的部分。

.sh {
  --valorshadow: -20px 30px 10px rgba(0, 0, 0, 0.3);
  filter: drop-shadow(var(--valorshadow));
}

.box {
  --x: 10px;
  --y: 30px;
  clip-path: polygon( 0 calc(var(--x) + var(--y)), var(--y) var(--y), calc(100% - var(--y)) var(--y), calc(100% - var(--y)) calc(100% - var(--y)), var(--y) calc(100% - var(--y)), 0 calc(100% - var(--x) - var(--y)));
  margin: 30px;
  transform-origin: left;
  transform: perspective(1000px) rotateY(35deg);
  outline: var(--y) solid rgba(0, 0, 0, 0.4);
  outline-offset: calc(-1*var(--y));
}
<div class="sh">
  <img src="https://c4.wallpaperflare.com/wallpaper/391/773/307/art-artistic-artwork-creative-wallpaper-preview.jpg" class="box">
</div>

如何制作框架并使其具有3D透视图外观？

从图像中我必须将其显示为绘画，并在其上放置框架（所有这些都具有3D透视图）。这就是图像的外观，就像一幅画：这就是图像的外观。...

Answer 1

在这种情况下，您可以简单地调整clip-path以使轮廓可见。使用the previous question

第一个代码段中的一个