CSS3制作炫酷带方向感应的鼠标滑过图片3D动画

}   
    
.out-left .info {   
  -webkit-transform-origin: 0% 0%;   
          transform-origin: 0% 0%;   
  -webkit-animation: out-left 300ms ease 0ms 1 forwards;   
          animation: out-left 300ms ease 0ms 1 forwards;   
}       
  

 JavaScript

该特效中使用JavaScript来获取鼠标进入网格的方向，为相应的网格动画添加相应的class类。其中getDirection()函数为获取方向函数。

JavaScript Code复制内容到剪贴板

var getDirection = function (ev, obj) {   
    var w = obj.offsetWidth,    
        h = obj.offsetHeight,    
        x = ev.pageX – obj.offsetLeft – w / 2 * (w > h ? h / w : 1),    
        y = ev.pageY – obj.offsetTop – h / 2 * (h > w ? w / h : 1),    
        d = Math.round(Math.atan2(y, x) / 1.57079633 + 5) % 4;   
    return d;   
};       
  

然后通过遍历所有的li元素，通过鼠标进入的方向来添加相应的class类。

JavaScript Code复制内容到剪贴板

var nodes = document.querySelectorAll(‘li’),   
    _nodes = [].slice.call(nodes, 0);   
var addClass = function (ev, obj, state) {   
    var direction = getDirection(ev, obj), class_suffix = ”;   
    obj.className = ”;   
    switch (direction) {   
    case 0:   
        class_suffix = ‘-top’;   
        break;   
    case 1:   
        class_suffix = ‘-right’;   
        break;