图片的3D立体旋转

Ghost
发表于 2018/10/28

小编前几日在写一个前端项目时,根据设计要求需要做一个图片3d动画,实现鼠标移入、移出时图片的立体旋转效果,左移入向右旋转,右移入向左旋转,等各方向亦是如此,鼠标移出图片复位,通过使用jQuery解决了这个问题,现在给大家分享一下主要代码,希望对大家有用。

HTML代码如下:

<div class="box">

<div class="box-3d">

<div class="box-3d-content">

<img src="/img/show02.png">

<img src="/img/show02.png">

<img src="/img/show02.png">

<img src="/img/show02.png">

<img src="/img/show02.png">

</div>

</div>

</div>

css 代码如下:

.tu{width: 240px;

      height: 300px;

      position: relative;

  }

.box-3d{

width: 170px;

height: 170px;

display: block;

margin: 20px auto;

margin-top: 40px;

margin-left:35px;

cursor: pointer;

perspective: 1000px;

}

.box-3d-content{

width: 170px;

height: 170px;

transform: translateZ(-84px)  rotateX(0deg) rotateY(0deg);

transform-origin: 50%;

transform-style: preserve-3d;

transition: transform .5s ;

}

.box-3d-content img{

width: 100%;

height: 100%;

display: block;

position: absolute;


}

.box-3d-content img:nth-child(1){

transform: translateZ(84px);

}

.box-3d-content img:nth-child(2){

transform: rotateY(90deg) translateZ(84px);

}

.box-3d-content img:nth-child(3){

transform: rotateY(-90deg) translateZ(84px);

}

.box-3d-content img:nth-child(4){

transform: rotateX(-90deg) translateZ(84px);

}

.box-3d-content img:nth-child(5){

transform: rotateX(90deg) translateZ(84px);

}


jQuery代码如下:

$(document).ready(function(){

    $(".box-3d").on("mouseenter mouseleave",function(e) {

        spin(e,this);

    });

    function spin(e,obj) {

        var sTop = getScrollTop();

        var w = obj.offsetWidth;

        var h = obj.offsetHeight;

        var x = e.pageX - obj.getBoundingClientRect().left - w/2;

        var y = e.pageY - obj.getBoundingClientRect().top - sTop - h/2;

        var direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4;

        var eventType = e.type;

        var box3D = $(obj).find(".box-3d-content");

        if(eventType == 'mouseenter'){

            switch (direction){

                case 0:

                    box3D.css("transform","translateZ(-85px) rotateY(0deg) rotateX(-90deg)");

                    break;

                case 1:

                    box3D.css("transform","translateZ(-85px) rotateY(-90deg) rotateX(0deg)");

                    break;

                case 2:

                    box3D.css("transform","translateZ(-85px) rotateY(0deg) rotateX(90deg)");

                    break;

                case 3:

                    box3D.css("transform","translateZ(-85px) rotateY(90deg) rotateX(0deg)");

                    break;

            }

        }else{

            box3D.css("transform","translateZ(-85px) rotateY(0deg) rotateX(0deg)");

        }

    }


    function getScrollTop(){

        var scrollTop=0;

        if(document.documentElement&&document.documentElement.scrollTop)

        {

            scrollTop=document.documentElement.scrollTop;

        }

        else if(document.body)

        {

            scrollTop=document.body.scrollTop;

        }

        return scrollTop;

    }

    

});

通过以上代码就可以实现图片立体旋转效果。路过小伙伴留赞,不喜勿喷,谢谢!


最新回复(1)
小学
时光巷陌  7天前
1时光巷陌bbb82
(0)2
好,谢谢分享

© 66xianyu.com 咸鱼论坛
本站使用Catfish(鲶鱼) CMS之鲶鱼Blog系统

点击加咸鱼论坛QQ群 [881936765]

   留言 建议 投诉