如何通过css3设置三维图像

Question

我有一个带有一些3d图形图像的设计，但我没有用css3或其他方法设置图像。我已经附上一个样本图像，请给我正确的解决方案与css代码。

谢谢你

​

Answer 1

我就是这样做的：

.container {
  perspective: 400px;
  perspective-origin: center center;
}

img {
  width: 500px;
  height: 300px;
  transition: 0.4s;
}

img:hover {
  transform: rotateY(0deg);
}

.rightimg {
  transform-origin: right center;
  transform: perspective(600px) rotateY(-20deg);
}

.leftimg {
  transform-origin: left center;
  transform: perspective(600px) rotateY(20deg);
}

demo