多维数据集上的 translateZ 后 CSS 旋转多维数据集不起作用答案

【问题标题】：CSS rotating cube doesn't work after translateZ on cube多维数据集上的 translateZ 后 CSS 旋转多维数据集不起作用
【发布时间】：2014-02-24 09:39:25
【问题描述】：

在这个jsFiddle 中，我创建了一个100% 宽度的立方体，当按下按钮时它会水平旋转。立方体向前移动，但是好像放大了一样，所以我向它添加了translateZ 函数。由于多维数据集的动态大小，必须使用 jQuery 添加。这是我的 jQuery：

var windowWidth = ($(window).width() / 2);
$('div#cube').css({
    'transform': 'translateZ(-' + windowWidth + 'px)',
    '-webkit-transform': 'translateZ(-' + windowWidth + 'px)',
    '-moz-transform': 'translateZ(-' + windowWidth + 'px)'
});

但这似乎阻止了立方体旋转，我不知道为什么。当我在 CSS 中添加 translateZ 时，立方体能够旋转。

#cube {
    height: 100%;
    position: absolute;
    transform: translateZ(-100px);
    -webkit-transform: translateZ(-100px);
    -moz-transform: translateZ(-100px);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transition: transform 1s;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    width: 100%;
}

我的代码有错误吗？我做错了吗？还是我想要做的，不可能？

【问题讨论】：

我已经更新了一个不会导致 css 增长的版本，但我认为你还是明白了。

标签： jquery html css 3d transform

【解决方案1】：

问题在于，通过设置css 您正在设置样式，这优先于类。您将需要通过每次应用而不是使用类来累积 css 上的转换。 this jsfiddle 中显示了一个简单的方法。

本质上是有方法的：

function doTransform($elem, theTransform)
{
    $elem.css('transform', $elem.css('transform') + ' ' + theTransform )
    $elem.css('-webkit-transform:', $elem.css('transform') + ' ' + theTransform )
    $elem.css('-moz-transform', $elem.css('transform') + ' ' + theTransform )    
}

点击后调用的a如下：

doTransform($('#cube'),'rotateY(-90deg)');

更新

现在这并不理想，因为 css 会不断增长，所以更好的方法是在 doTransform 中设置翻译，请参阅此 jsfiddle。

function doTransform($elem, theTransform)
{    
    var windowWidth = ($(window).width() / 2);
    var theTranslation = 'translateZ(-' + windowWidth + 'px)';    
    $elem.css('transform',  theTranslation + ' ' + theTransform )
    $elem.css('-webkit-transform:', theTranslation + ' ' + theTransform )
    $elem.css('-moz-transform', theTranslation + ' ' + theTransform )    
}

然后调用为：

doTransform($('#cube'),'rotateY(-' + (90 * ctr).toString() + 'deg)');

【讨论】：