Can't click direction nav and pagination after put transform rotate

I have a project that need to use image slideshow with 3d hover effect so I use Flexslider and 3d hover effect code

var move = $(".slider");
$(document).on("mousemove",function(e) {  
  var ax = -($(window).innerWidth()/2- e.pageX)/300;
  var ay = ($(window).innerHeight()/2- e.pageY)/285;
  move.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");    

});

But the result is the 3d hover effect working but any link button in the slider not working ( the navigation next and prev not working and the pagination circle not working )

This is my full code

<body class="loading">

  <div id="container" class="cf">
  <div id="main" role="main">

      <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li>
              <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
            </li>
            <li>
              <img src="images/kitchen_adventurer_lemon.jpg" />
            </li>
          </ul>
        </div>
        <div class="custom-navigation">
          <a href="#" class="flex-prev">Prev</a>
          <div class="custom-controls-container"></div>
          <a href="#" class="flex-next">Next</a>
        </div>
      </section>
    </div>

  </div>

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>

  <!-- FlexSlider -->
  <script defer src="../jquery.flexslider.js"></script>

  <script type="text/javascript">
    $(window).load(function(){

      var move = $(".slider");
        $(document).on("mousemove",function(e) {  
          var ax = -($(window).innerWidth()/2- e.pageX)/40;
          var ay = ($(window).innerHeight()/2- e.pageY)/25;
          move.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");    

        });

      $('.flexslider').flexslider({
        animation: "slide",
        controlsContainer: $(".custom-controls-container"),
        customDirectionNav: $(".custom-navigation a"),
        start: function(slider){
          $('body').removeClass('loading');
        }
      });
    });
  </script>

</body>

I tried at to change my .attr to .css move.attr("style", "transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-webkit-transform: rotateY("+ax+"deg) rotateX("+ay+"deg);-moz-transform: rotateY("+ax+"deg) rotateX("+ay+"deg)");

and the result still same, the Transform Rotate CSS make all the clickable not working. Any idea how to fix this problem ?

woocommerce / FlexSlider

Can't click direction nav and pagination after put transform rotate #1678