JavaScript的旋轉格disapearing

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）來設置精度來解決。 W7 - 由於在他們兩人之後4次點擊消失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>