查看效果：

http://js.jirengu.com/negor/4/edit?html,output

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width">

    <title>JS Bin</title>

    <style>

        *{box-sizing: border-box;}

        div#test{

            width: 100%;

            height: 500px;

            background: white;

            padding: 100px 0;

            margin: 100px auto;

            border: 1px solid;

            perspective: 1000px;

        }

        #banner{

            height: 300px;

            width: 400px;

            margin: 0 auto;

            background:  #37D7B2;

            transition: transform 0.1s;

            box-shadow: 0 0 15px rgba(0,0,0,0.25);

            text-align: center;

            line-height: 300px;

            font-size: 50px;

            color: #fff;

        }

        body{

            background: white;

            padding: 20px;

        }

    </style>

</head>

<body>

<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

<div id="test">

    <div id="banner" >banner</div>

</div>

<script>

    $('#test').on('mousemove', function(e){

        var offset = $('#test').offset()

        var x = e.pageX - offset.left

        var y = e.pageY - offset.top

        var centerX = $('#test').outerWidth() /2

        var centerY = $('#test').outerHeight() /2

        var deltaX = x - centerX

        var deltaY = y - centerY

        var percentX = deltaX / centerX

        var percentY = deltaY / centerY

        var deg = 10

        $('#banner').css({

            transform: 'rotateX('+deg*-percentY + 'deg)'+

            ' rotateY('+deg*percentX+'deg)'

        })

    })

</script>

</body>

</html>

锤子banner的更多相关文章

  1. html+css模仿的锤子官方首页

    <div id="wrapper"> <header> <div class="container"> <h1> ...

  2. 锤子OneStep及BigBang使用体验

    令人期待的Smartisan OS v3.1.2终于推送了,第一时间下载了更新.几乎花了半个小时才升级完毕,捧着还热乎的手机,赶忙体验一下传说中的两大杀器:OneStep以及BigBang. 先说On ...

  3. 模仿东京首页banner轮播，京东新闻上下滚动动画实现（动画实现）

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着 ...

  4. 想着模仿京东微信首页呢，banner滚动搞定了，写到了一半了

    接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞 ...

  5. 2D banner

    1.这是我第一次发博客咯!看到本文章后不喜勿喷,有什么需要改进的地方请多多指教! 2.今天和大家分享一下2D banner,代码如下,注释都有.因为本地测试和上传到博客环境不太一样,样式变化比较大,样 ...

  6. Banner中利用Jquery隐藏显示下方DIV块

    实现方式1: <!DOCTYPE html><html><head>    <meta charset="UTF-8">    &l ...

  7. ios显示一个下载banner

    <meta name="apple-itunes-app" content="app-id=432274380" /> 这个标签是告诉iphone的 ...

  8. 自动滑动的banner图

    实例: HTML页面: <div style="position: absolute; left: 0; top: 0; width: 100%; height: 100%; min- ...

  9. 网站banner写法

    css .banner{ width: %; height: 375px; background: url(X.jpg) no-repeat center;} html <div class=& ...

随机推荐

  1. 数位DP题目汇总

    Google Code Jam 2014 Round 1B Problem B hdu 2089 hdu 3555 uestc 250 (原1307) hdu 3652 hdu 3709 Light ...

  2. javascript 导出Excel

    测试兼容IE google 火狐浏览器.看到的朋友也许你某一天也会需要. //obj是table表格外面嵌套div id function saveCode(obj) { try { var strH ...

  3. ACM/ICPC 之 DP-浅谈“排列计数” (POJ1037)

    这一题是最近在看Coursera的<算法与设计>的公开课时看到的一道较难的DP例题,之所以写下来,一方面是因为DP的状态我想了很久才想明白,所以借此记录,另一方面是看到这一题有运用到 排列 ...

  4. effective OC2.0 52阅读笔记（一 熟悉Objective-C）

    第一章:熟悉Objective-C 1 了解objective-c语言的起源 总结:OC为C语言添加了面向对象的特性,是其超集.采用动态绑定的消息结构而非函数调用,也就是说,要在运行时才检查对象类型及 ...

  5. Effective C++ -----条款21：必须返回对象时，别妄想返回其reference

    绝不要返回pointer或reference指向一个local stack对象,或返回reference指向一个heap-allocated对象,或返回pointer或reference指向一个loc ...

  6. HDU 4865 Peter's Hobby（概率、dp、log）

    给出2个影响矩阵,一个是当天天气对湿度的影响,一个是前一天天气对当天天气的影响. 即在晴天(阴天.雨天)发生Dry(Dryish.Damp.Soggy)的概率,以及前一天晴天(阴天.雨天)而今天发生晴 ...

  7. C#有关日期的使用方法

    DateTime dt = DateTime.Now; //当前时间 DateTime startWeek = dt.AddDays( - Convert.ToInt32(dt.DayOfWeek.T ...

  8. JavaScript for循环里边异步操作问题。

    问题:(DRIVING.search是异步操作) for循环中做异步操作会导致aDistances数组里边的数据全部都是从A_SHOP_INFO数组中最后一条数据获取的值. var iIdx = 0; ...

  9. Jquery 点击按钮将其背景图换成另一张，再次点击恢复默认图片

    这是Jquery代码: $(function () { $("#h1").toggle(function () { $("#h1").css("bac ...

  10. Java抽象类接口、内部类题库

    一.    选择题 1. Person类和Test类的代码如下所示,则代码中的错误语句是(  C  ).(选择一项)   public class Person { public String nam ...