CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ohav ben yanai
ohav ben yanai

Reputation: 175

style conflict between javascript and css

I have built a little element 3d rotator for infinite rotating in either direction on the X or Y axis. However I am running into what I think is a css style conflict. #face2 has a css property that rotates it -180deg . however its not being implemented by the browser.

is this a css conflict perhaps?

you can see the code and the effect in this code pen :

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

Upvotes: 1

Views: 157

Answers (1)

atmd
atmd

Reputation: 7490

It's because of the whitespace inbetween rotateX and (

try: transform: rotateX( -180deg );

Upvotes: 1

Related Questions