Imitation Hammer Mall Home banner Chart mouse follow and visual difference effect

I found that many sites now use this effect, such as the Hammer official website, Elementui official website, second taste class, not only has the mouse to follow the effect, with the mouse movement also has the visual difference effect, looks very tall on the technology, actually realizes is very simple, The main use of CSS3 's Transform-style and persperctive attributes.

Nonsense not much to say directly on the code:

Html:

<div class= "Perspective" >        <div class= "Preserve3d" >            <span class= "Preserve3d_img" ></ span>            <span class= "Preserve3d_text" > Pride and Bigotry <br/> return Pride and Prejudice </span>        </div></div >

Css:

Key settings:

1, set the perspective property for the outer container, this property value can be customized can be numeric, top/bottom, etc.

2. Set the element you want to be visually poor to absolute positioning, and add the Transform:tanslatez (deg) property

    * {font-family: "Microsoft Yahei";        Transition:all. 3s;        -webkit-transition:all. 3s;        Transition-timing-function:linear;    -webkit-transition-timing-function:linear;    }. Perspective {perspective:800px;        }. preserve3d {position:relative;        width:600px;        height:300px;        margin:100px Auto; Background:url ("Http://static.smartisanos.cn/index/img/store/home/banner-3d-item-1-box-1_61bdc2f4f9.png")        Center No-repeat;        background-size:100% 100%;        border-radius:10px;    transform-style:preserve-3d;        }. preserve3d_img {position:absolute;        width:100%;        height:100%;        bottom:11px;        left:0; Background:url ("Http://static.smartisanos.cn/index/img/store/home/banner-3d-item-1-box-3_8fa7866d59.png")        Center No-repeat;        background-size:95% 100%;    -webkit-transform:translatez (60px); }. preserve3d_text {position:absolute;        top:20%;        right:10%;        font-size:30px;        Color: #fff;        Text-align:right;        Font-weight:lighter;    -webkit-transform:translatez (40px); }

Js:

$ ('. Preserve3d '). On (' MouseEnter ', function () {          var thispx = $ (this). Offset ().          var Thispy = $ (this). Offset (). Top;          var boxwidth = $ (this). Outerwidth ();          var boxheight = $ (this). Outerheight ();          $ (this). addclass ("smart_3d");          })          . On (' MouseMove ', function (event) {          var mousex = event.pagex-thispx;          var mousey = Event.pagey-thispy;          var X = MOUSEX-BOXWIDTH/2;          var Y = boxheight/2-Mousey;          $ (this). css ({            "-webkit-transform": "Rotatey (" + x/50 + "deg)" + "Rotatex (" + y/50 + "deg)"          })          . On (' MouseLeave ', function () {            $ (this). Removeclass ("Smart3d");            $ (this). css ({              "-webkit-transform": "Rotatey (0deg) Rotatex (0deg)"            })          })     

OK, it's so simple ~ can also be directly made into the jquery plug-in, specific reference: Https://github.com/tian0o0/html5/tree/master/smart_banner

Imitation Hammer Mall Home banner Chart mouse follow and visual difference effect