* {
  margin: 0;
  padding: 0;
  list-style: none;
}
body {
  background-color: #f1e1ff;
}
img {
  width: 180px;
  height: 180px;
}
.wrapper {
  margin: 80px auto;
  width: 900px;
}
.wrapper li {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 180px;
  margin: 5px;
  perspective: 300px;
}
.picBox {
  transform-style: preserve-3d;
  animation: 200ms ease-out 0ms 1 normal forwards;
  transform-origin: 50% 50% -90px;
}
.picBox,
.hide,
.show {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.hide {
  background-color: #000;
  color: #fff;
  line-height: 180px;
  text-align: center;
  transform: translate3d(0, 0, -1px);
}

/*top进入*/
.out-top .hide,
.in-top .hide {
  transform-origin: 0% 100%;
  transform: translate3d(0, -100%, 0) rotate3d(1, 0, 0, 90deg);
}
.in-top .picBox {
  animation-name: in-top;
}
.out-top .picBox {
  animation-name: out-top;
}
@keyframes in-top {
  form {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(-1, 0, 0, 90deg);
  }
}
@keyframes out-top {
  form {
    transform: rotate3d(-1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

/*right进入*/
.out-right .hide,
.in-right .hide {
  transform-origin: 0% 0%;
  transform: translate3d(100%, 0, 0) rotate3d(0, 1, 0, 90deg);
}
.in-right .picBox {
  animation-name: in-right;
}
.out-right .picBox {
  animation-name: out-right;
}
@keyframes in-right {
  form {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, -1, 0, 90deg);
  }
}
@keyframes out-right {
  form {
    transform: rotate3d(0, -1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

/*bottom进入*/
.out-bottom .hide,
.in-bottom .hide {
  transform-origin: 0% 0%;
  transform: translate3d(0, 100%, 0) rotate3d(-1, 0, 0, 90deg);
}
.in-bottom .picBox {
  animation-name: in-bottom;
}
.out-bottom .picBox {
  animation-name: out-bottom;
}
@keyframes in-bottom {
  form {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 0, 0, 90deg);
  }
}
@keyframes out-bottom {
  form {
    transform: rotate3d(1, 0, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

/*left进入*/
.out-left .hide,
.in-left .hide {
  transform-origin: 100% 0%;
  transform: translate3d(-100%, 0, 0) rotate3d(0, -1, 0, 90deg);
}
.in-left .picBox {
  animation-name: in-left;
}
.out-left .picBox {
  animation-name: out-left;
}
@keyframes in-left {
  form {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  to {
    transform: rotate3d(0, 1, 0, 90deg);
  }
}
@keyframes out-left {
  form {
    transform: rotate3d(0, 1, 0, 90deg);
  }
  to {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

var oLi = $("li");
var arr = [];
//获取方向->获取进出->添加类名

//初始化
//获取li位置信息，宽高
init();
function init() {
  //将li转换成数组
  Array.prototype.slice.call(oLi, 0).forEach(function(ele, index) {
    arr.push({
      w: ele.offsetWidth,
      h: ele.offsetHeight,
      l: ele.offsetLeft,
      t: ele.offsetTop
    });
    bindEvent(ele, index);
  });
}

function bindEvent(ele, index) {
  $(ele).on("mouseenter", function(e) {
    addClass(e, ele, "in", index);
  });
  $(ele).on("mouseleave", function(e) {
    addClass(e, ele, "out", index);
  });
}

function addClass(e, ele, state, index) {
  //获取进入的方向
  var d = getD(e, index);
  var str = "";
  switch (d) {
    case 0:
      str = "-left";
      break;
    case 1:
      str = "-top";
      break;
    case 2:
      str = "-right";
      break;
    case 3:
      str = "-bottom";
      break;
  }
  ele.className = "";
  ele.classList.add(state + str);
}

function getD(e, index) {
  var w = arr[index].w,
    h = arr[index].h,
    l = arr[index].l,
    t = arr[index].t;
  x = e.pageX - l - w / 2;
  y = e.pageY - t - h / 2;
  //获取进入方向
  d = Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90) % 4;
  return d;
}