如何创建带有框架的 3D 图像？答案

【问题标题】：How to create a 3D image with a frame around?如何创建带有框架的 3D 图像？
【发布时间】：2020-06-16 18:47:14
【问题描述】：

我必须从图像中将其展示为一幅画，并在其上放置一个框架（所有这些都是 3D 透视图）。这就是图像应该看起来的样子，就像一幅画：

这是它与框架的外观：

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

.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 透视效果？

【问题讨论】：

@TemaniAfif 我们是 2 个人，这是学校的团队合作，是数据库的分配，但是我们对 html 和 css 了解不多，所以我们在做视觉部分时遇到了困难项目。我们要做一个小艺术商店，当另一个做项目的女孩告诉我你回答了这个问题时，我也想上传这个问题，看看有没有运气。希望如此。感谢您回答上一个问题。 :)
这是你想要的吗：jsfiddle.net/ob3nxph1?
@TemaniAfif 是的，就是这样，非常非常非常感谢。真的很感谢。
为我的答案添加了另一个想法，以获得更好的渲染效果

标签： html css image css-transforms

【解决方案1】：

在这种情况下，您可以简单地调整clip-path 以保持轮廓可见。使用the previous question的第一个sn-p中的那个

.box {
  --x: 10px;
  --y: 30px;

  clip-path: polygon(0 var(--x), var(--y) 0,
      100% 0, 100% 100%,
      var(--y) 100%, 0 calc(100% - var(--x)));
  margin: 30px;
  transform-origin: left;
  transform: perspective(1000px) rotateY(35deg);
  outline: var(--y) solid rgba(0, 0, 0, 1);
  outline-offset: calc(-1*var(--y));

}

&lt;img src="https://picsum.photos/id/1015/728/600"  class="box"&gt;

或者像下面这样有一个更逼真的框架：

.box {
  --x: 10px;
  --y: 30px;
  --o:10px;

  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)));
  -webkit-mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0);
          mask:linear-gradient(to right,rgba(0,0,0,0.7) var(--y), #fff 0);
  margin: 30px;
  transform-origin: left;
  transform: perspective(1000px) rotateY(35deg);
  outline: calc(var(--y) + var(--o)) solid rgba(0, 0, 0, 1);
  outline-offset: calc(-1*(var(--y) + var(--o)));

}

&lt;img src="https://picsum.photos/id/1015/728/600"  class="box"&gt;

【讨论】：