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

  width: 200px;   
  height: 200px;   
  margin: 5px;   
  padding: 0;   
  list-style: none;   
}   
li a {   
  display: inline-block;   
  vertical-align: top;   
  text-decoration: none;   
  border-radius: 4px;   
}      
  

同时为了制作3D效果，为每一个li元素添加透视属性。

CSS Code复制内容到剪贴板

li {   
  -webkit-perspective: 400px;   
          perspective: 400px;   
}       

用于制作3D翻转的遮罩层div.info默认设置为100%的宽度和100%的高度，使用绝对定位，开始时位于左上角位置。然后使用rotate3d()函数将它沿X轴顺时针旋转90度，使其不可见。

CSS Code复制内容到剪贴板

.info {   
  -webkit-transform: rotate3d(1, 0, 0, 90deg);   
          transform: rotate3d(1, 0, 0, 90deg);   
  width: 100%;   
  height: 100%;   
  padding: 20px;   
  position: absolute;   
  top: 0;   
  left: 0;   
  border-radius: 4px;   
  pointer-events: none;   
  background-color: rgba(26, 188, 156, 0.9);   
}       
  

最后在CSS样式中为鼠标从上下左右4个方向进入和离开时预设了class类，这些class是在鼠标进入网格时，使用JavaScript来检测鼠标的进入方向，然后为其添加相应的class类。

CSS Code复制内容到剪贴板

.in-top .info {   
  -webkit-transform-origin: 50% 0%;   
          transform-origin: 50% 0%;   
  -webkit-animation: in-top 300ms ease 0ms 1 forwards;   
          animation: in-top 300ms ease 0ms 1 forwards;   
}   
    
.in-rightright .info {   
  -webkit-transform-origin: 100% 0%;   
          transform-origin: 100% 0%;