style conflict between javascript and css

Question

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>

Answer 1

It's because of the whitespace inbetween rotateX and (

try: transform: rotateX( -180deg );

style conflict between javascript and css

Question

1 answers

solution1
1 ACCPTED 2015-07-20 16:26:01

style conflict between javascript and css

Question

1 answers

solution1 1 ACCPTED 2015-07-20 16:26:01

solution1
1 ACCPTED 2015-07-20 16:26:01