How to use CSS3 to make cool with direction-sensitive mouse slide over picture 3D animation

This article is mainly for you to introduce the CSS3 production of cool with the direction of the mouse sliding image 3D animation, with a certain reference value, and compatible with the latest mainstream browser, interested in the small partners can refer to

This is a use of CSS3 and a little JS to make the cool with the direction of the mouse slide over the picture 3D animation effects. In special effects, when the user's mouse over the grid in the picture, the content mask layer in the grid will appear 3D flip animation, and with direction sensing, can start from the mouse into the direction of the flip, the effect is very cool.

Online preview Source Download

How to use

HTML structure

In this direction, the HTML structure of the mouse-over animation uses the HTML structure of the unordered list to make the grid layout, and each <li> element is a grid. Each grid uses a <svg> element to make a placeholder, which is actually a small icon of a picture. Another p.info is a mask layer to be flipped 3D.

<p class= ' container ' >    <ul>      <li>        <a class= ' normal ' href= ' # ' >          <svg viewbox= ' 0 0 x= ' 0px ' y= ' 0px ' >            <g>              <path d= ' M 68.9708 24.8623 L 60.4554 2.3018 ... 68.0625 Z ' ></path>            </g>          </svg>        </a>        <p class= ' info ' >          < h3>...
CSS Styles

The entire grid layout is made using an unordered list, and all LI elements are left-floating.

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;   }
Also, to create a 3D effect, add perspective properties for each Li element.


Li {     -webkit-perspective:400px;             perspective:400px;   }
Matte layer for 3D flipping p.info default is 100% width and 100% height, using absolute positioning, starting at the upper left corner. Then use the Rotate3d () function to rotate it 90 degrees clockwise along the x-axis to make it invisible.


. 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 (188, 156, 0.9);   }
Finally, the class class is preset for the mouse to enter and leave from the top and left 4 directions in the CSS style, when the mouse enters the grid, using JavaScript to detect the mouse's direction of entry, and then add the appropriate class class for it.

. 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

This special effect uses JavaScript to get the mouse in the direction of the grid, adding the appropriate class class for the corresponding mesh animation. where the Getdirection () function is the get direction function.


var getdirection = function (ev, obj) {       var w = obj.offsetwidth,            h = obj.offsetheight,            x = ev.pagex-obj.offs ETLEFT-W/2 * (W > H h/w: 1),            y = ev.pagey-obj.offsettop-h/2 * (H > w? w/h: 1),            d = MATH.R Ound (math.atan2 (y, x)/1.57079633 + 5)% 4;       return D;   };
Then, by traversing all the LI elements, the corresponding class class is added in the direction of the mouse entry.


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);   });
The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!