rotate on mouse hover

Question

I have this function but there are two issues I can't solve, first one is that the mouse action is set on all the screen and I want it to be when hover over the dive "ehab" only, not when I move mouse over screen, the other issue is that when I have more than one div , the function works only on the first one ... kindly advise me

    /*
        By     : Ofelquis
        Twitter: @felquis
        Blog   : tutsmais.com.br

        Simples implementação ;)
    */
    !(function ($doc, $win) {
        var screenWidth = $win.screen.width / 2,
            screenHeight = $win.screen.height / 2,
            $ehab = $doc.querySelectorAll('#ehab')[0],
            validPropertyPrefix = '',
            otherProperty = 'perspective(600px)';

            if(typeof $ehab.style.webkitTransform == 'string') {
                validPropertyPrefix = 'webkitTransform';
            } else {
                if (typeof $ehab.style.MozTransform == 'string') {
                    validPropertyPrefix = 'MozTransform';
                }
            }

        $doc.addEventListener('mousemove', function (e) {
            // vars 
            var centroX     = e.clientX - screenWidth,
                centroY     = screenHeight - (e.clientY + 13),
                degX   = centroX * 0.1,
                degY   = centroY * 0.1

            // Seta o rotate do elemento
            $ehab.style[validPropertyPrefix] = otherProperty + 'rotateY('+ degX +'deg)  rotateX('+ degY +'deg)';
        });
    })(document, window);

Answer 1

The first problem, (I want it to be when hover the div "#ehab"), you need the attach the mousemove event to your div:

$ehab.addEventListener('mousemove', function (e) {
     //You code here.
});

The second problem, (when I have more than one div , the function works only on the first one), you can't have duplicated IDs on your DOM tree, change the selector to a class, for example, .ehab then you have to loop through the matched elements, please try this code:

/*
                By     : Ofelquis
                Twitter: @felquis
                Blog   : tutsmais.com.br

                Simples implementação ;)
            */
    !(function($doc, $win) {
      var $ehabDIVs = $doc.querySelectorAll('.ehab'),
        otherProperty = 'perspective(600px)';


      for (var i = 0; i < $ehabDIVs.length; ++i) {
        var $ehab = $ehabDIVs[i];

        $ehab.addEventListener('mousemove', function(e) {
          // vars 
          var centroX = (e.pageX - this.offsetLeft) - this.offsetWidth/2,
            centroY = this.offsetHeight/2 - (e.pageY-this.offsetTop),
            degX = centroX * 0.1,
            degY = centroY * 0.1
          if(this._leave) clearInterval(this._leave);
          // Seta o rotate do elemento
          this.style.transform = otherProperty + 'rotateY(' + degX + 'deg)  rotateX(' + degY + 'deg)';
        });

        $ehab.addEventListener('mouseleave', function(e) {
          var self = this;
          this._leave = setTimeout(function() {
              self.style.transform = 'rotateY(0deg)  rotateX(0deg)';
          }, 250);
        });

      }
    })(document, window);

.ehab {
  width:300px;
  height:300px;
  background-color:red;
  margin:15px;
  float:left;
  transition: transform 0.15s ease;
}

<div class="ehab">First Div</div><div class="ehab">Second Div</div>

Good Luck Ismaiel.