更新

Question

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

  <style>
    .page {
      /*width: 58.3396%; 
        height: 16.914%;*/
      width: 30%;
      height: 5%;
      transform: matrix3d(0.93, 0.36, 0.00, 0, -0.36, 0.93, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
      -webkit-transform: matrix3d(0.93, 0.36, 0.00, 0, -0.36, 0.93, 0.00, 0, 0, 0, 1, 0, 0, 0, 0, 1);
    }
  </style>
</head>

<body>
  <div>
    <img src="./img/background.jpg" class="img-fluid">
    <img src="./img/img1.jpeg" class="page">
  </div>
</body>

</html>

如何在绿色和蓝色背景上放置图片？为此，是否可以仅使用css，例如3d转换函数？

Answer 1

更新

您可以这样做：

使用matrix3d transform：

div {
  width: 400px;
  position: relative;
}
div img {
  width: 100%;
}
div span:nth-of-type(1) {
  background: url(https://picsum.photos/375/151?image=990) no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 151px;
  transform: matrix3d( 0.548752   ,  0.14839    , 0, -0.000261138, 
                      -0.533756   ,  0.203838   , 0, -0.000359532, 
                       0          ,  0          , 1,  0          ,
                      91          , 95          , 0, 1
  );
  transform-origin: 0 0;
}
div span:nth-of-type(2) {
  background: url(https://picsum.photos/240/200?image=991) no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 200px;
  transform: matrix3d( 0.320781, 0.0786819, 0, -0.000358941, 
                      -0.236755, 0.3753   , 0, -0.000196034, 
                       0       , 0        , 1, 0, 
                     252       , 46       , 0, 1
  );
  transform-origin: 0 0;
}

<div>
  <img src="https://i.stack.imgur.com/ppZGY.jpg" alt="" />
  <span></span>
  <span></span>
</div>

矩阵元素是使用此工具https://jsfiddle.net/HerrSerker/Lbgr63s5/14/导出的，该工具是http://jsfiddle.net/dFrHS/1/的副本，此处对此SE答案中的描述https://math.stackexchange.com/a/339033/65531

旧

这是可行的。但是我不知道如何轻松地做到这一点。

在这里，我有一个示例，该示例不适合100％，但您应该看到该方法。

您必须在perspective上玩perspective-origin和div，并玩top，left，transform，{{1} }和width上的height进行修改。

您看到我不太正确。这些值是通过实验获得的，我无法确定您将如何准确获得它们。

span

div {
  width: 400px;
  position: relative;
  perspective: 1000px;
  perspective-origin: -533px -361px;
}

div img {
  width: 100%;
}

div span:nth-of-type(1) {
  background: url(https://picsum.photos/175/151?image=990) no-repeat;
  background-size: cover;
  position: absolute;
  width: 175px;
  height: 151px;
  top: 96.3px;
  left: 91px;
  transform: rotateX(93deg) rotateY(362deg) rotateZ(53deg);
  transform-origin: 0 0;
}

Answer 2

您可以仅使用CSS来执行此操作，但是像上面提到的那样使它具有响应能力，这样可能会变得有些棘手。

所以我假设它可以是静态宽度，在这种情况下，您可以执行以下操作：

将背景图像（带有蓝色/绿色块）添加到元素（DIV或其他元素）
使用其伪元素（::before和::after）或添加两个子元素（也可以是div的元素）来容纳其他图像
使用position:absolute; left: FOO; top: BAR;分别定位两个子元素（不要忘记在父div上设置position: relative;
使用类似transform: scale(1) skew(15deg)的方法或变换3D选项以使其倾斜/变形，使其与3D平面匹配

TL; DR

附加背景图片
创建两个元素来保存其他图像
将每个位置绝对匹配位置
添加变换以匹配方向
利润：）

注意：如果使用伪类，请不要忘记设置content: ""或将图像附加在那里。否则将无法看到伪装

转换信息：https://developer.mozilla.org/en-US/docs/Web/CSS/transform

伪造：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements

如何将图像放在另一个

2 个答案:

更新

旧