使用CSS3透视图和变换将图像渲染为3d立方体

Question

我一直使用PHP和ImageMagick来生成画布打印的3D预览（见下图）。

可以选择更改边缘类型，深度，大小等AJAX调用PHP支持文件，该文件使用新设置重新呈现预览，然后将其重新加载到DOM中。

繁忙时，服务器开始超载。所以我认为我可以在CSS3中做到这一点，而是在客户端进行所有预览渲染。

这是我到目前为止所拥有的：

<div class="wrapper">
  <div class="inner">
    <div>
      <img src="http://lorempixel.com/200/200/nature" alt="Nature">
    </div>
  </div>
</div>

.wrapper {
  perspective: 500px;
  margin: 4em auto; 
  width: 37em;
}

.inner {
  transform: rotateY(40deg);
}

.inner div {
  width: 11em;
  display: inline-block;
  margin-right: 1em;
}

.inner img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
}

我遇到的问题是将图像包裹在边缘周围，如上图所示。我怎么能这样做？

Answer 1

我做了一个演示，其中2个元素保持相同的图像。

只需根据尺寸设置图像原点，它就会匹配。

＆＃13;

＆＃13;

.main {
  width: 400px;
  height: 300px;
  border: solid 1px red;
  background-image: url(http://lorempixel.com/400/300);
  background-size: 0px 0px;
  perspective: 500px;
  position: relative;
}

.front {
  position: absolute;
  width: 360px;
  height: 100%;
  left: 40px;
  top: 0px;
  transform: rotateY(45deg);
  transform-origin: left center;
  background-image: inherit;
  background-position: -40px 0px;
}
.side {
  position: absolute;
  width: 40px;
  height: 100%;
  left: 0px;
  top: 0px;
  transform: rotateY(-45deg);
  transform-origin: right center;
  background-image: inherit;
  background-position: 0px 0px;
}

＆＃13;

<div class="main">
  <div class="side"></div>
  <div class="front"></div>
</div>

＆＃13;

＆＃13;

＆＃13;