javascript和css之間的風格衝突

我已經構建了一個小元素3d旋轉器，用於在X或Y軸上以任意方向無限旋轉。但是我遇到了我認爲是CSS風格的衝突。＃face2有一個css屬性，它旋轉-180deg。然而它沒有被瀏覽器實現。javascript和css之間的風格衝突

這可能是一個css衝突嗎？

你可以看到在這個代碼筆的代碼和效果：

//declaring global variables 
 

 
window.RotXFrontVal = 0; // by how much to rotate the X value of the front face 
 
window.RotXBackVal = -180; // by how much to rotate the X value of the back face 
 
window.RotYFrontVal = 0; // by how much to rotate the Y value of the front face 
 
window.RotYBackVal = 180; // by how much to rotate the Y value of the back face 
 

 
$(document).ready(function() { 
 
    //$('#face2').css({'transform': 'rotateX(-180deg)'}, 0); 
 
    //$('#face2').animate({'transform', 'rotateX(-180deg)'}, 0); 
 
    //$('#face2').animate({'transform': 'rotateX(-180deg)'}, 0); 
 
    
 
    var MyDivSlider = function() { // Here will come the Div Slider by Scroll 
 

 
    var scl = $.now(); // Take a time stamp to prevent function from triggering too often 
 

 
    $(document).on('DOMMouseScroll mousewheel', function MyScroll(event) { 
 
    
 
     if (($.now() - scl) > 500) { 
 

 
     if (event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0) { 
 
      //Scroll Down 
 
      window.RotXFrontVal = window.RotXFrontVal - 180; 
 
      window.RotXBackVal = window.RotXBackVal - 180; 
 
      console.log("Down. Front: " + RotXFrontVal + "and" + RotXBackVal + " is Back"); 
 
     } 
 

 
     //Up Scroll 
 
     else { 
 
      
 
      window.RotXFrontVal = window.RotXFrontVal + 180; 
 
      window.RotXBackVal = window.RotXBackVal + 180; 
 
      console.log("Up. Front: " + RotXFrontVal + "and" + RotXBackVal + " is Back"); 
 

 
     } 
 
     $('#face2').css('transform', 'rotateX(' + RotXBackVal + 'deg)'); 
 
     $('#face1').css('transform', 'rotateX(' + RotXFrontVal + 'deg)'); 
 

 
     console.log('rotateX(' + RotXFrontVal + ')') 
 
     console.log('rotateX(' + RotXBackVal + ')') 
 

 
     scl = $.now(); 
 

 
     } 
 
    }); 
 
    }(); 
 
});

body { height:100%; overflow:hidden;} 
 

 
#card { 
 
\t  height:300px; 
 
\t \t width: 300px; 
 
\t \t display: block; 
 
\t \t position: relative; 
 
\t \t transform-style: preserve-3d; 
 
\t \t transition: all 1.5s linear; 
 
\t \t perspective: 1000px; 
 
} 
 

 
#face1 { 
 
\t \t display: block; 
 
\t \t position: absolute; 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t \t background: red; 
 
\t \t backface-visibility: hidden; 
 
\t \t transition: transform 1.5s; 
 
\t \t z-index: 2; 
 
} 
 

 
#face2 { 
 
\t \t display: block; 
 
\t \t position: absolute; 
 
\t \t width: 100%; 
 
\t \t height: 100%; 
 
\t \t background: blue; 
 
\t \t backface-visibility: hidden; 
 
\t \t transition: transform 1.5s; 
 
\t \t z-index: 1; 
 
\t \t transform: rotateX (-180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<body> 
 
\t <div id="card"> 
 
\t \t <div id = "face1">Use the mouse scroll button to rotate me</div> 
 
\t \t <div id = "face2">Use the mouse scroll button to rotate me</div> 
 
\t </div> \t \t \t 
 
</body>

來源

2015-07-20 ohav ben yanai

這是因爲空白其間rotateX和(

嘗試的：transform: rotateX(-180deg);

來源

2015-07-20 16:26:01 atmd

謝謝您！正如你所說我刪除了空間，現在它工作！ –

@ohavbenyanai所以標記他的答案爲溶劑;） – artdias90

javascript和css之間的風格衝突

回答

相關問題