Question

我已经构建了一个小元素3d旋转器，可以在X轴或Y轴上的任一方向无限旋转。但是我遇到了我认为是css风格的冲突。 #face2有一个css属性，可以旋转-180deg。但它没有被浏览器实现。

这或许是一场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 {
	     height:300px;
		 width: 300px;
		 display: block;
		 position: relative;
		 transform-style: preserve-3d;
		 transition: all 1.5s linear;
		 perspective: 1000px;
}

#face1 {
		 display: block;
		 position: absolute;
		 width: 100%;
		 height: 100%;
		 background: red;
		 backface-visibility: hidden;
		 transition: transform 1.5s;
		 z-index: 2;
}

#face2 {
		 display: block;
		 position: absolute;
		 width: 100%;
		 height: 100%;
		 background: blue;
		 backface-visibility: hidden;
		 transition: transform 1.5s;
		 z-index: 1;
		 transform: rotateX ( -180deg );
}

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

Answer 1

这是因为rotateX和(

之间的空格

尝试：transform: rotateX( -180deg );

javascript和css之间的风格冲突

1 个答案: