如何创建带有边框的3D图像？ [英] How to create a 3D image with a frame around?

问题描述

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

这是它与框架的外观：

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

  .sh {---valorshadow：-20px 30px 10px rgba（0，0，0，0.3）; filter：drop-shadow（var（-valorshadow））;}。box {--x：10px; --y：30px;剪切路径：多边形（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）））;边距：30px; transform-origin：左;变换：Perspective（1000px）rotationY（35deg）;轮廓：var（-y）solid rgba（0，0，0，0.4）;轮廓偏移量：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外观

解决方案

在这种情况下，您只需调整剪切路径使轮廓可见。使用

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:

This is how it should look with the 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?

解决方案

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

这篇关于如何创建带有边框的3D图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！