Php 使用CSS3透视和变换将图像渲染为三维立方体

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

有一些选项可以更改边缘类型、深度、大小等，这些都是对PHP支持文件的AJAX调用，该文件使用新设置重新呈现预览，我将其重新加载到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;
}

.包装纸{
透视图：500px；
保证金：4em自动；
宽度：37em；
}
.内部{
变换：旋转（40度）；
}
.内分区{
宽度：11em；
显示：内联块；
右边距：1米；
}
.内部img{
显示：块；
高度：自动；
最大宽度：100%；
保证金：0自动；
}

---

我遇到的问题是像上面的图像那样将图像的边缘环绕起来。我怎样才能做到这一点呢？

我做了一个演示，有两个元素保存着相同的图像

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

.main{
宽度：400px；
高度：300px；
边框：实心1px红色；
背景图片：url(http://lorempixel.com/400/300);
背景尺寸：0px 0px；
透视图：500px；
位置：相对位置；
}
.前线{
位置：绝对位置；
宽度：360px；
身高：100%；
左：40px；
顶部：0px；
变换：旋转（45度）；
变换原点：左中心；
背景图像：继承；
背景位置：-40px 0px；
}
.这边{
位置：绝对位置；
宽度：40px；
身高：100%；
左：0px；
顶部：0px；
变换：旋转（-45度）；
变换原点：右中心；
背景图像：继承；
背景位置：0px 0px；
}

---

我做了一个演示，有两个元素持有相同的图像

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

.main{
宽度：400px；
高度：300px；
边框：实心1px红色；
背景图片：url(http://lorempixel.com/400/300);
背景尺寸：0px 0px；
透视图：500px；
位置：相对位置；
}
.前线{
位置：绝对位置；
宽度：360px；
身高：100%；
左：40px；
顶部：0px；
变换：旋转（45度）；
变换原点：左中心；
背景图像：继承；
背景位置：-40px 0px；
}
.这边{
位置：绝对位置；
宽度：40px；
身高：100%；
左：0px；
顶部：0px；
变换：旋转（-45度）；
变换原点：右中心；
背景图像：继承；
背景位置：0px 0px；
}

您的意思是在css3中使用imageMagick从一张图片中剪切出的6幅图像执行此操作吗？您的意思是在css3中使用imageMagick从一张图片中剪切出的6幅图像执行此操作吗？非常有趣@VAL，但当我运行示例代码时，您的右边缘出现故障。另外，在透视图中，边缘不可见？前面元素的宽度有一个错误，它必须是400-40。更正：-）非常有趣@vals，但是当我运行示例代码时，您的右边缘失败。另外，在透视图中，边缘不可见？前面元素的宽度有一个错误，它必须是400-40。更正：-）