Question

我正在编写一个简单的jQuery页面，其中显示了两个图像。单击其中一个会触发CSS3转换，该转换应该结束对图像的缩放。

必须在iPad上查看页面，因此我必须使用CSS3 3D Transformation才能使用硬件加速并保持过渡顺利。

我在这里写了一个简单的演示脚本：http://jsfiddle.net/andrearota/KAdmV/4/

E.g。这是我如何使用比例因子放大。请注意，我使用z属性试图获得关闭的div：

Carousel.prototype.openLeft = function (callback) {
    var that = this;
    if (this.leftStatus != 'open') {
      this.left.transition({
          z: '+=100',
          scale: 2 
        }, function () {
          that.leftStatus = 'open';
          if (callback) callback();
        });
    } else {
        if (callback) callback();
    }
};

正如您所看到的，如果您在左侧图像上显示，则图像会放大并越过右侧图像。当您单击右侧时，反之亦然。但是，如果再次单击左侧的图像，则可以看到图像堆叠的问题，因为左侧缩放的图像位于最小化的右侧。

任何提示？

Answer 1

看起来你可以删除第二张图像上的变换，它会回到第一张图像后面。换句话说，在图像上单击时，我可能会首先删除所有出现的transform属性，然后再应用于单击的图像。

或者您也可以将两个图像设置为位置：相对然后点击将z-index设置为类似5并将所有其他图像设置为低于它的值，例如3.但是，您需要清除这些内联样式，以便在单击另一个图像时，会有来自之前的残余，从而为您提供不清晰的结果。

在Safari上奇怪的行为CSS 3D转换

1 个答案: