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

问题

From an image I have to show it as a painting and also put a frame on it (all this with a 3D perspective). This is how the image should look, like a painting:

Image like a painting

This is how it should look with the frame:

Image like a peinting with frame

Here is the code I have, so far only the part that looks like a picture.

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

How can I make the frame and make it look with a 3D perspective?

回答1:

In this case you can simply adjust the clip-path to keep the outline visible. Use the one in the first snippet of the previous question

.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">

Or like below to have a more realistic frame:

.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">

来源：https://stackoverflow.com/questions/62396918/how-to-create-a-3d-image-with-a-frame-around

标签

html

css

image

css-transforms