旋转3D图像

Question

在我正在工作的网站上，有一幅最初旋转的图像。我被要求把它转回去，以便它正确面对我们，但是我真的不知道该怎么做，我已经尝试过

transform: rotateY(10deg);

transform: rotate3d(1, 1, 1, 45deg);

但是它们似乎没有用。

我在这里创建了一个最小的可复制示例-

div {
  width: 400px;
  height: auto;
  margin: 0 auto;
}

img {
  width: 100%;
  height: 100%;
  display: block;
  transform:rotateY(140deg)
/*  need to turn it so that the picture is facing us with its front side  */
}

<div>
  <img src="https://i.ibb.co/pw8Mc2M/product-redox.png" alt="product-redox" border="0">
</div>

如果有人可以帮助您转变形象，我将非常高兴。

这是它的外观：

Answer 1

您可以使用clip-path剪切图像以仅保留所需的一面，然后进行变换：

div {
  width: 400px;
  margin: 0 auto;
  filter:drop-shadow(-15px 15px 20px rgba(0,0,0,0.5));
}

img {
  width: 100%;
  display: block;
  clip-path:polygon(0% 4%,73.6% 16.5%,73.6% 100%,0 100%);
  transform:skew(-8deg) rotate(-7deg) rotateY(-7deg);
}

<div>
  <img src="https://i.ibb.co/pw8Mc2M/product-redox.png" alt="product-redox" border="0">
</div>