javascript 旋转 div 消失

Question

我正在尝试通过围绕 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 就消失了。谁能给我解释一下？

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

javascript 旋转 div 消失

javascript spinning div disapearing

javascript

jquery

css-transforms