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

Question

从图像中，我必须将其显示为一幅画，并在其上放置一个框架（所有这些都具有 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 透视图？

Answer 1

在这种情况下，您只需调整 clip-path 即可保持轮廓可见。使用

第一个片段中的那个

.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));

}

<img src="https://picsum.photos/id/1015/728/600"  class="box">

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

.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)));

}

<img src="https://picsum.photos/id/1015/728/600"  class="box">

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

How to create a 3D image with a frame around?

html

css

image

css-transforms