javascript旋转div消失答案

【问题标题】：javascript spinning div disapearingjavascript旋转div消失
【发布时间】：2015-02-11 17:20:00
【问题描述】：

我正在尝试通过围绕 z 轴旋转一些图像来创建旋转幻灯片，为此我创建了这个：

function gira(clicked) {
    //Definimos la transformación que queremos hacer del elemento
    var angulo = 60 * (Math.PI / 180);
    var matgirder = [
        [Math.cos(angulo), 0, Math.sin(angulo), 0],
        [0, 1, 0, 0],
        [-Math.sin(angulo), 0, Math.cos(angulo), 0],
        [0, 0, 0, 1]
    ];
    //Obtenemos la matriz de estado de transformación del elemento
    var posicion = $(clicked).css("transform");
    var values = posicion.match(/-?[\d\.]+/g);
    var matrix = [
        [values[1], values[2], values[3], values[4]],
        [values[5], values[6], values[7], values[8]],
        [values[9], values[10], values[11], values[12]],
        [values[13], values[14], values[15], values[16]]
    ];
    //Multiplicamos la matriz de estado por la de transformación
    var girada = [];
    for (var i = 0; i < matrix.length; i++) {
        girada[i] = [];
        for (var j = 0; j < matgirder[0].length; j++) {
            var sum = 0;
            for (var k = 0; k < matrix[0].length; k++) {
                sum += matrix[i][k] * matgirder[k][j];
            }
            girada[i][j] = sum;
        }
    }
    //Aplicamos la transformación al elemnto
    $(clicked).css("transform", "matrix3d(" + girada + ")");
}

.contenedorcarrusel {
    height: 10vw;
    -webkit-perspective: 1100px;
    -moz-perspective: 1100px;
    -o-perspective: 1100px;
    perspective: 1100px position: relative;
}
#carrusel {
    width: 140px;
    height: 100%;
    position: relative;
    margin: 0 auto;
    -webkit-transform: translateZ(-288px);
    -moz-transform: translateZ(-288px);
    -o-transform: translateZ(-288px);
    transform: translateZ(-288px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="contenedorcarrusel" style="outline: 1px solid red;">
    <div id="carrusel">
        <div class="imagencar" id="foto1" style="background: hsla(0, 100%, 50%, 0.8 ); height: 100px; position: absolute; -webkit-transform: rotateY(   0deg ) translateZ( 200px ); -moz-transform: rotateY( 0deg ) translateZ( 200px ); -o-transform: rotateY( 0deg ) translateZ( 200px ); transform: rotateY( 0deg ) translateZ( 200px ); width: 140px; z-index: -1000;" onClick="gira(this)"></div>
    </div>
</div>

它工作正常，但在某些时候，当您单击时，div 就会消失。有人可以解释一下吗？

【问题讨论】：

不会在 Chrome、OSX 中消失
我在 firefox 和 chrome 中尝试过，var angulo = 60 在它们中，它在点击 4 次后消失 - W7。如果您更改角度，点击次数会发生变化，但它会在某个时候消失。无论如何，感谢您的宝贵时间
在它消失之前的最后一个状态具有极高的值（如 .. 3.33066907387547e-16 或 -1.56319401867222e-13），这会使下一个值错误以及导致 div 消失。跨度>
我没有意识到这一点。当数字接近 0 而不是给出 0 值时，它会得到一个巨大的十进制数。每次点击后我都会尝试设置数字的精度

标签： javascript jquery css-transforms

【解决方案1】：

好的，当值接近 0 时，这是十进制精度的问题，通过添加 .toFixed(6) 来设置精度来解决。感谢 Spokey 注意到这一点

function gira(clicked) {
    //Definimos la transformación que queremos hacer del elemento
    var angulo = 60 * (Math.PI / 180);
    var matgirder = [
        [Math.cos(angulo), 0, Math.sin(angulo), 0],
        [0, 1, 0, 0],
        [-Math.sin(angulo), 0, Math.cos(angulo), 0],
        [0, 0, 0, 1]
    ];
    //Obtenemos la matriz de estado de transformación del elemento
    var posicion = $(clicked).css("transform");
    var values = posicion.match(/-?[\d\.]+/g);
    var matrix = [
        [values[1], values[2], values[3], values[4]],
        [values[5], values[6], values[7], values[8]],
        [values[9], values[10], values[11], values[12]],
        [values[13], values[14], values[15], values[16]]
    ];
    //Multiplicamos la matriz de estado por la de transformación
    var girada = [];
    for (var i = 0; i < matrix.length; i++) {
        girada[i] = [];
        for (var j = 0; j < matgirder[0].length; j++) {
            var sum = 0;
            for (var k = 0; k < matrix[0].length; k++) {
                sum += matrix[i][k] * matgirder[k][j];
            }
            girada[i][j] = sum.toFixed(6);
        }
    }
    //Aplicamos la transformación al elemnto
    $(clicked).css("transform", "matrix3d(" + girada + ")");
}

.contenedorcarrusel {
    height: 10vw;
    -webkit-perspective: 1100px;
    -moz-perspective: 1100px;
    -o-perspective: 1100px;
    perspective: 1100px position: relative;
}
#carrusel {
    width: 140px;
    height: 100%;
    position: relative;
    margin: 0 auto;
    -webkit-transform: translateZ(-288px);
    -moz-transform: translateZ(-288px);
    -o-transform: translateZ(-288px);
    transform: translateZ(-288px);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="contenedorcarrusel" style="outline: 1px solid red;">
    <div id="carrusel">
        <div class="imagencar" id="foto1" style="background: hsla(0, 100%, 50%, 0.8 ); height: 100px; position: absolute; -webkit-transform: rotateY(   0deg ) translateZ( 200px ); -moz-transform: rotateY( 0deg ) translateZ( 200px ); -o-transform: rotateY( 0deg ) translateZ( 200px ); transform: rotateY( 0deg ) translateZ( 200px ); width: 140px; z-index: -1000;" onClick="gira(this)"></div>
    </div>
</div>

【讨论】：