显示前半部分图像和后半部分图像

Question

小提琴：https://jsfiddle.net/Lv6kyL8t/15/。在鼠标悬停图像上，我将图像旋转360度。

当图像在小提琴中旋转时，您可以看到马克杯的前和后一侧显示汽车。但我需要的是我想要在前侧显示上半部的汽车。后侧车的下半场。

这样一辆车将覆盖整个马克杯

＆＃13;

＆＃13;

#simple1 {
  position: relative;
}

.container {
  width: 62px;
  height: 91px;
  position: relative;
  perspective: 400px;
  margin: 55px;
  left: 10px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: transform 1s;
  transition: -webkit-transform 1s;
}

.container:hover #card {
  -webkit-animation: rotate 3s linear infinite;
}

.back {
  -webkit-transform: rotateY( 180deg);
  transform: rotateY( 360deg);
  position: absolute;
  top: 0px;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotateY(0deg)
  }
  to {
    -webkit-transform: rotateY(360deg)
  }
}

＆＃13;

<section class="container">
  <div id="card">
    <img id="simple1" class="back" src='https://i.stack.imgur.com/q60IC.jpg' alt='Title of image'></img>

  </div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

总结评论部分的讨论：
您目前所拥有的资产无法实现您的目标。

我可以看到三种可能的方法，可以为您提供所需的功能 然而，关键是将杯子（图像）与用户图​​像（汽车）分开。

1. 带有单独图像的CSS旋转
   将一个图像用于杯子本身，然后将用户的图像叠加在其上。那就是你现在正在做的事情。让它们正确定位和旋转可能会很棘手，因此幻觉成立。此外，杯子的可视化将非常有限。坦率地说，我建议不要这样做。
2. 撰写图像
   您可以使用图像库（JavaScript或PHP）或一些数学和图像处理算法，以便将用户的图像从不同角度（前，后，左，右）变形为空白杯子的一些准备好的图像。然后，您可以向用户显示这些合成图像。这将限制可能的角度，但应该给出不错的结果。如果你在编写服务器端，浏览器支持将是一个明智的选择。只有当WebGL解决方案由于某种原因不可行时，我才会这样做。
3. 的 WebGL的
   我推荐的方法。模拟一个杯子（或所有可能的杯子）一次。在杯子周围添加几个额外的面孔。然后用WebGL渲染杯子并在额外的脸上显示用户的图像，以便将它们叠加到杯子上。这需要对WebGL进行一些阅读，但是由于像three.js这样的库，这可能比第二种方法更容易。唯一的缺点可能是即使是高聚杯仍然看起来绝对不真实。好处是非常灵活：你可以让用户在所有轴上旋转360度，放大和缩小;你可以添加一个背景场景（可能是办公桌），甚至可以用热气腾腾的咖啡填充杯子。添加一些高光贴图和合适的光源，你的杯子会很好看，有光泽。

Answer 2

您需要将两个图像拆分为单独的视图并使用类似

的内容

.flip-container {
    -webkit-perspective: 1000;
    font-size: 30px;
    margin: 10px;
    float: left;
}

.flip-container.vertical:hover .flipper {
    -webkit-transform: rotateX(180deg);
}
.flip-container.horizontal:hover .flipper {
    -webkit-transform: rotateY(180deg);
}

.flipper {    
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    position: relative;
}
.flip-container.vertical .flipper {
    -webkit-transform-origin: 50% 100px;    
}

.front, .back {
    -webkit-backface-visibility: hidden;
    position: absolute;
    top: 0; left: 0;
}

.front {
    z-index: 1;
    background: #3498db;
}

.flip-container, .front, .back {
    width: 200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
}

.back {    
    background: #2ecc71;
}

.flip-container.horizontal .back {
    -webkit-transform: rotateY(180deg);
}
.flip-container.vertical .back {
    -webkit-transform: rotateX(180deg);
}

<div class="flip-container horizontal">
    <div class="flipper">
        <div class="front">
            FRONT
        </div>
        <div class="back">
            BACK
        </div>
    </div>
</div>
<div class="flip-container vertical">
    <div class="flipper">
        <div class="front">
            FRONT
        </div>
        <div class="back">
            BACK
        </div>
    </div>
</div>