本篇内容介绍了“CSS3制作带方向感应的鼠标滑过图片3D动画”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
目前成都创新互联公司已为上1000家的企业提供了网站建设、域名、网页空间、成都网站托管、企业网站设计、鼓楼网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
这是一款使用CSS3和一点JS来制作的炫酷带方向感应的鼠标滑过图片3D动画特效。在特效中，当用户的鼠标滑过网格中的图片时，网格中的内容遮罩层会出现3D翻转动画，并且带有方向感应，能够从鼠标进入的方向开始翻转，效果非常的酷。
在线预览 源码下载
使用方法
HTML结构
该方向感应鼠标滑过动画的HTML结构采用无序列表的HTML结构来制作网格布局，每一个
....
......
CSS样式
整个网格布局使用无序列表来制作，所有的li元素都采用左浮动。
CSS Code复制内容到剪贴板
ul {
padding: 0;
margin: 0 0 50px;
}
ul:after {
content: "";
display: table;
clear: both;
}
li {
position: relative;
float: left;
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%;
-webkit-animation: in-rightright 300ms ease 0ms 1 forwards;
animation: in-rightright 300ms ease 0ms 1 forwards;
}
.in-bottombottom .info {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: in-bottombottom 300ms ease 0ms 1 forwards;
animation: in-bottombottom 300ms ease 0ms 1 forwards;
}
.in-left .info {
-webkit-transform-origin: 0% 0%;
transform-origin: 0% 0%;
-webkit-animation: in-left 300ms ease 0ms 1 forwards;
animation: in-left 300ms ease 0ms 1 forwards;
}
.out-top .info {
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-webkit-animation: out-top 300ms ease 0ms 1 forwards;
animation: out-top 300ms ease 0ms 1 forwards;
}
.out-rightright .info {
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-animation: out-rightright 300ms ease 0ms 1 forwards;
animation: out-rightright 300ms ease 0ms 1 forwards;
}
.out-bottombottom .info {
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-animation: out-bottombottom 300ms ease 0ms 1 forwards;
animation: out-bottombottom 300ms ease 0ms 1 forwards;
}
.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;
case 2:
class_suffix = '-bottom';
break;
case 3:
class_suffix = '-left';
break;
}
obj.classList.add(state + class_suffix);
};
_nodes.forEach(function (el) {
el.addEventListener('mouseover', function (ev) {
addClass(ev, this, 'in');
}, false);
el.addEventListener('mouseout', function (ev) {
addClass(ev, this, 'out');
}, false);
});
“CSS3制作带方向感应的鼠标滑过图片3D动画”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
达州做网站
