css3 3D悬浮倾斜效果

求一个设计大佬设计博客样式。。。
直男审美自己都看不下去了= =
作为回报我可以教你一点前端知识 (•̀ω•́ 」∠) //虽然我也是菜鸡...要不肉偿把我

今天的主题是css3中的transfrom-style中的preserve-3d鼠标悬浮倾斜效果

下面是效果图

悬浮倾斜

qq截图把鼠标隐藏了
是不是感觉很厉害
其实很简单
但是我花了一天时间才做出来(果然是码渣= =)
下面是详细步骤

1，父元素设置景深

景深这个东西靠空间想象能力吧，属性设置perspective:800px;，需要设置在盒子的父级元素上，将整个父级盒子当作承载3D的载体。景深设置的越小，3D效果会越明显。

2，子元素容器设置

分别设置，转变方式设为3D效果，渐变时间设为0.2s

    transform-style: preserve-3d;
    transition:all 0.2s;   

3，监听鼠标的移入与移出

鼠标移入，产生倾斜效果倾斜效果由transfram中的rotateX，rotateY决定，鼠标移出，清除倾斜效果。po主用的是vue，代码如下

<div class="mainBox" id="main">         
            <div v-for="(article,index) in articles" class="ass clearfix" @mousemove="skew($event,index)" @mouseleave="clearRot(index)">
//在vue中，如果想要同时传入参数和event事件对象，需要在参数中写$event，否则只用写e就好了
                <h2>{{article.title}}</h2>
                <section>{{article.date}}</section>
                <p>{{article.content}}</p>
                <a href="javascript:" @click="readmore">阅读全部</a>
            </div>
        </div>

---

skew(e,index){...}//划重点
clearRot(index){                                
  //一寸长，一寸强
  //querySelector属于原生css选择器，动态设置transform时可以加上webkit前缀兼容低版本webkit浏览器
  document.querySelector('#main').childNodes[index].style.webkitTransform = "rotate(0deg)"
}

4，重点来了

为了让鼠标在子元素中不同位置，盒子会有不同的倾斜效果，如果把每个盒子当作一个容器，左上角为原点，得到这个容器中鼠标的坐标，再根据鼠标坐标，动态设置倾斜的角度，效果就ok了。

具体操作

在上面传入函数的event对象，存在pageX与pageY属性，获得的是鼠标相对于浏览器窗口的距离，如果我们再有，每个盒子相对浏览器窗口的距离，那么

鼠标在盒子中的相对距离 = 鼠标相对窗口距离 - 盒子相对窗口距离

于是，我们通过dom.getBoundingClientRect().left获得盒子相对窗口距离，通过event.pageX获取鼠标相对窗口距离，计算得出鼠标相对盒子距离
注意，e.pageY始终获取的是鼠标位置与原始窗口顶部的位置，也就是说，无论滚动条滚动多少，在同一个地方的e.pageY不变，但是dom.getBoundingClientRect().top在变，所以计算相对高度时，要减去滚动的高度

      var Xskew = e.pageX  - leftDis + 10  +1  //加1防止为0时翻转出问题
      var Yskew = e.pageY - document.documentElement.scrollTop - topDis

5，当相对位置Xskew大于盒子宽度的一半则相当于按压右边，小于盒子宽度的一半则相当于按压左边，上下同理

此处rotate大小设置看个人喜好，我设置的是rotateX范围为(-4,4)，rotateY范围(-6.5，6.5)

6，空间直角坐标系中，在一个盒子中若要出现类似按压的效果，以左上角为例，若左上角被按压，则盒子当向前沿X轴(顺时针)旋转，因此rotate为正，因为左侧按压，则沿Y轴逆时针旋转，rotateY(...)为负

对应的
左上角被按压对应 transform:rotateX(4) rotateY(-6.5)
左下角被按压对应 transform:rotateX(-4) rotateY(-6.5)
右上角被按压对应 transform:rotateX(4) rotateY(6.5)
右下角被按压对应 transform:rotateX(-4) rotateY(6.5)

计算出旋转的角度最后将其设置到transform属性上即可
dom.style.webkitTransform = "rotateX("+Xdeg+"deg)"+"rotateY("+Ydeg+"deg)"

7，具体代码

skew(e,index){
            //获取文章dom元素
            var dom = document.querySelector('#main').childNodes[index]
            //获取元素自身高度和宽度
            var Wdom = dom.offsetWidth
            var Hdom = dom.offsetHeight
            
            //dom.getBoundingClientRect()可以直接获取到元素的与浏览器的相对位置
            var leftDis = dom.getBoundingClientRect().left
            var topDis = dom.getBoundingClientRect().top + 20
            
            //注意，e.pageY始终获取的是鼠标位置与原始窗口顶部的位置，也就是说，无论滚动条滚动多少，在同一个地方的e.pageY不变，但是dom.getBoundingClientRect().top在变，所以计算相对高度时，要减去滚动的高度
            var Xskew = e.pageX - leftDis + 10  //加10防止为0时翻转出问题
            var Yskew = e.pageY - document.documentElement.scrollTop - topDis
            
            console.log(e.pageY)
            //console.log(Xskew,Yskew)
            if(Yskew >= Hdom/2){    
                //6.5设为x轴方向倾斜的最大参数，从6.5到-6.5
                var Xdeg = -(4/(Hdom/2))*(Yskew-(Hdom/2))
            }else{
                //此处有转义错误，先用4除2好了

                var Xdeg = (4/(Hdom/2))*((Hdom/2)-Yskew)
                //console.log('Xdeg为'+Xdeg)
                //var Ydeg = (3.25/Wdom)*(Xskew - (Wdom/2))
            }
            //高度195的一半,和宽度不一样，这里设为固定值
            if(Xskew < Wdom/2){
                var Ydeg = -(6.5/(Wdom/2))*(Wdom/2-Xskew)
            }else{
                var Ydeg = (6.5/(Wdom/2))*(Xskew-Wdom/2)
            }
            //console.log(Xdeg,Ydeg)
            dom.style.webkitTransform = "rotateX("+Xdeg+"deg)"+"rotateY("+Ydeg+"deg)"
        }

---

2017/11/5