這是一款使用CSS3和一點(diǎn)JS來(lái)制作的炫酷帶方向感應(yīng)的鼠標(biāo)滑過(guò)圖片3D動(dòng)畫(huà)特效。在特效中，當(dāng)用戶(hù)的鼠標(biāo)滑過(guò)網(wǎng)格中的圖片時(shí)，網(wǎng)格中的內(nèi)容遮罩層會(huì)出現(xiàn)3D翻轉(zhuǎn)動(dòng)畫(huà)，并且?guī)в蟹较蚋袘?yīng)，能夠從鼠標(biāo)進(jìn)入的方向開(kāi)始翻轉(zhuǎn)，效果非常的酷。

在線預(yù)覽 源碼下載

使用方法

HTML結(jié)構(gòu)

該方向感應(yīng)鼠標(biāo)滑過(guò)動(dòng)畫(huà)的HTML結(jié)構(gòu)采用html' target='_blank'>無(wú)序列表的HTML結(jié)構(gòu)來(lái)制作網(wǎng)格布局，每一個(gè) li 元素是一個(gè)網(wǎng)格。每個(gè)網(wǎng)格中使用一個(gè) svg 元素來(lái)進(jìn)行占位，實(shí)際上它是一個(gè)圖片的小圖標(biāo)。另外p.info是要進(jìn)行3D翻轉(zhuǎn)的遮罩層。

 p >
CSS樣式
整個(gè)網(wǎng)格布局使用無(wú)序列表來(lái)制作，所有的li元素都采用左浮動(dòng)。
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; }
同時(shí)為了制作3D效果，為每一個(gè)li元素添加透視屬性。
li {  -webkit-perspective: 400px;  perspective: 400px; }
用于制作3D翻轉(zhuǎn)的遮罩層p.info默認(rèn)設(shè)置為100%的寬度和100%的高度，使用絕對(duì)定位，開(kāi)始時(shí)位于左上角位置。然后使用rotate3d()函數(shù)將它沿X軸順時(shí)針旋轉(zhuǎn)90度，使其不可見(jiàn)。
.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樣式中為鼠標(biāo)從上下左右4個(gè)方向進(jìn)入和離開(kāi)時(shí)預(yù)設(shè)了class類(lèi)，這些class是在鼠標(biāo)進(jìn)入網(wǎng)格時(shí)，使用JavaScript來(lái)檢測(cè)鼠標(biāo)的進(jìn)入方向，然后為其添加相應(yīng)的class類(lèi)。
.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來(lái)獲取鼠標(biāo)進(jìn)入網(wǎng)格的方向，為相應(yīng)的網(wǎng)格動(dòng)畫(huà)添加相應(yīng)的class類(lèi)。其中g(shù)etDirection()函數(shù)為獲取方向函數(shù)。
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; };
然后通過(guò)遍歷所有的li元素，通過(guò)鼠標(biāo)進(jìn)入的方向來(lái)添加相應(yīng)的class類(lèi)。
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); });
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP ！
相關(guān)推薦：
使用CSS3實(shí)現(xiàn)超酷的黑貓警長(zhǎng)首頁(yè)
如何利用CSS3制作簡(jiǎn)單的3d半透明立方體圖片
以上就是如何使用CSS3制作炫酷帶方向感應(yīng)的鼠標(biāo)滑過(guò)圖片3D動(dòng)畫(huà)的詳細(xì)內(nèi)容，PHP教程        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。