锤子科技官网banner的动效是如何实现的？

Question

锤子科技官网banner的动效是如何实现的呢？就是图片随鼠标的轨迹移动的动效。以及上方图片文字动效。是CSS3吗？
地址：https://www.smartisan.com/

Answer 1

<style type="text/css">
    .content{
        margin:200px auto;
        width:200px;
        height:200px;  
        background: #db473c;  
        color:#fff;   
    }
    .container {
        transform-style: preserve-3d;
        perspective: 500px;
    }
    </style>
    <div class="container">
    <div class="content"></div>
    </div>
    <script type="text/javascript">
        (function(){
            var content=document.querySelector(".content")
                content.onmousemove=function(e){
                    var evt=e||window.event;
                    var rotateY=-(content.clientWidth/2-evt.offsetX)/10;
                    var rotateX=(content.clientHeight/2-evt.offsetY)/10;
                    content.style.transform=`rotateX(${rotateX}deg) rotateY(${rotateY}deg)`
                }
        }
        )()
        
    </script>

Answer 2

从效果来看，鼠标移动到不同位置，反馈的动画不一样，可以很明确的看出，这个效果是js+css3实现的。
js判断鼠标位置，css3做效果

Answer 3

js 判断鼠标位置，修改css

Answer 4

根据css3中的旋转就可以实现的http://www.w3school.com.cn/cs...