如何用一个元素创建 3D 透视图像？答案

【问题标题】：How to create a 3D perspective image with one element?如何用一个元素创建 3D 透视图像？
【发布时间】：2020-10-04 08:17:55
【问题描述】：

我有一个代码，给定图像会产生 3D 透视效果。这是结果：

这是代码：

.thumb {
    margin: 100px;
    perspective: 1000px;  
    width: 1920px;
    height: 1200px;
         
}


.thumb a {
    --bg-pseudo: rotateY(120deg); /*Modificar transform */
    --bg-pseudo2: --bg-pseudo2', '-5px  -15px  45px 130px rgba(0, 0, 0, 0.3); /*modificar box-shadow */
    display: block;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('https://www.wallpaperk.com/wallpapers/white-wolf-painting-5111.jpg'); 
    
    background-size: 0, cover;
    transform-style: preserve-3d;
    transition: all 2s;
    transform: rotateY(40deg);
    /* From rotateX */
    transform-origin: left;
    /* From bottom */

    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}



.thumb a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px;
    height: 100%;
    background: inherit;
    background-size: cover, cover;
    background-position: 0px 0px;
    transform: var(--bg-pseudo);
    transform-origin: left;

    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}


.thumb a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: var(--bg-pseudo2);
    transition: all 2s;
    opacity: 1;
    transform: rotateX(0) translateZ(-20px) scale(0.85);
    transform-origin: bottom;
}

<div class="thumb" id="thumb">
    <a href="#"></a>
</div>

问题是，当我在 HTML 中使用它时，它与 <div> 和 <a> 一起使用，我想将它与 <img> 一起使用

问题是：有没有办法通过在图像中放置一个类来达到同样的效果？

<img src="foto.jpg" class="3dPerspective">

CSS 会怎样？请注意，结果有阴影。

【问题讨论】：

标签： html css image css-transforms perspective

【解决方案1】：

这是使用clip-path 和mask 的近似值。由于mask 所做的不透明度降低，它在某些情况下可能无法很好地渲染

.box {
  --x:10px;
  --y:20px;
  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(40deg);
  -webkit-mask:linear-gradient(to right,#fff var(--y),rgba(0,0,0,0.8) 0);
          mask:linear-gradient(to right,#fff var(--y),rgba(0,0,0,0.8) 0);
}

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

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

另一个想法更好地支持轮廓，没有不透明度问题，但您需要稍微剪切图像：

.box {
  --x:10px;
  --y:20px;
  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(40deg);
  outline: var(--y) solid rgba(0,0,0,0.4);
  outline-offset: calc(-1*var(--y));
}

<img src="https://picsum.photos/id/1072/600/300" class="box">
<img src="https://picsum.photos/id/104/600/300" class="box">

【讨论】：