Question

在这个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%;
}

我的代码中是否有错误？我接近了吗？或者是我想做什么，不可能？

Answer 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 )    
}

和在点击上调用的内容如下：

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)');

在立方体上的translateZ之后，CSS旋转立方体不起作用

1 个答案: