查看效果：

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. unity3d优化总结篇

    转自http://www.unitymanual.com/thread-21597-1-1.html 此总结由自己经验及网上收集整理优化内容 包括:1.代码方面:2.函数使用方面:3.ngui注意方面 ...

  2. Java for LeetCode 219 Contains Duplicate II

    Given an array of integers and an integer k, find out whether there there are two distinct indices i ...

  3. 网页中超链接的简化问题（如何避免超链接的get提交）

    废话不多,直接看例子吧: <a href="###?key=${*** }">跳转</a> 上面这个超链接被点击后,肯定会向某个控制器发送一个get请求,而 ...

  4. shell脚本监控MySQL服务是否正常

    监控MySQL服务是否正常,通常的思路为:检查3306端口是否启动,ps查看mysqld进程是否启动,命令行登录mysql执行语句返回结果,php或jsp程序检测(需要开发人员开发程序)等等: 方法1 ...

  5. modelsim do文件仿真

    1.编写sim.do文件 ##### Quit the Simulation ##### quit -sim   ##### Make work directory && Create ...

  6. Effective C++ -----条款18：让接口容易被正确使用，不易被误用

    好的接口很容易被正确使用,不容易被误用.你应该在你IDE所有接口中努力达成这些性质. “促进正确使用”的办法包括接口的一致性,以及与内置类型的行为兼容. “阻止误用"的办法包括建立新类型.限 ...

  7. Divide and Conquer:Cable Master(POJ 1064)

    缆绳大师 题目大意,把若干线段分成K份,求最大能分多长 二分法模型,C(x)就是题干的意思,在while那里做下文章就可以了,因为这个题目没有要求长度是整数,所以我们要不断二分才行,一般50-100次 ...

  8. 复习sqldataread

    public static DataTable ConvertDataReaderToDataTable(SqlDataReader dataReader) { ///定义DataTable Data ...

  9. 【leetcode】Reorder List （middle）

    Given a singly linked list L: L0→L1→…→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→… You must do thi ...

  10. eclipse快捷键Alt + / 失效

    最近电脑上的Eclipse没有了自动提示功能,也不是全部不提示,大多数情况下按下"alt+/"键还会产生提示,但是当我在java项目中邪main方法和syso的时候,"a ...