锤子官网3D效果的实现

效果演示

关键点：

1. clientX,clientY: 设置或获取鼠标指针位置相对于当前窗口的 x ,y坐标，其中客户区域不包括窗口自身的控件和滚动条. screenX是相对与客户端显示器而言，是绝对位置！
   特别说明：IE下此属性不规范，它们的最小值不是0而是2，也就是说IE下的clientX/clientY比火狐下始终大2px。

2. offsetX,offsetY: 设置或获取鼠标指针位置相对于触发事件的对象的 x,y 坐标。
   特别说明：只有IE支持！相当于IE下的pageX,pageY。

e.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft = e.pageX
e.clientY + document.documentElement.scrollTop  - document.documentElement.clientTop = e.pageY

3. pageX,pageY: 鼠标相对于整个页面的x,y坐标。

4. screenX,screenY: 设置或获取获取鼠标指针位置相对于用户屏幕的 x ,y坐标。

  var offset = $('.box').offset()//偏移
  var x = e.pageX - offset.left //获取X方向偏移值
  var y = e.pageY - offset.top//获取Y方向偏移值
  var centerX = $('.box').outerWidth() /2 //X轴中心点
  var centerY = $('.box').outerHeight() /2 //Y轴中心点
  var deltaX = x - centerX
  var deltaY = y - centerY
  var percentX = deltaX / centerX //鼠标距x轴终点的距离
  var percentY = deltaY / centerY //鼠标距y轴终点的距离
  var deg = 15  //保存角度
 $('.image').css({
    transform: 'rotateX('+deg * -percentY + 'deg)'+
    ' rotateY('+deg*percentX+'deg)'
  })

css代码：

*{box-sizing: border-box;}
.box{
  width: 100%;
  height: 500px;
  background: white;
  padding: 100px 0; 
  margin: 10px auto;
  border: 1px solid #ddd;  
  perspective: 1000px;  //关键
}

.image{
  height: 300px;
  width: 400px;
  margin: 0 auto;
  background:  #37D7B2;
  transition: transform 0.1s;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
  text-align: center;
  line-height: 300px;
  font-size: 50px;
  color: #fff;
}

body{
  background: white;
  padding: 20px;
}

perspective: 1000px; 这个很关键