查看效果：

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. uml 推荐文章

    http://blog.csdn.net/zfrong/article/details/4086424 http://www.cnblogs.com/ywqu/archive/2009/12/14/1 ...

  2. ACM/ICPC 之 DP-整数划分问题初探 (POJ1221)

    写下这道题的原因很简单= =,因为这一题的状态转移方程不好找,另一方面,我看到很多针对这一题写的解题报告都把累加状态说得模棱两可,甚至直接说成了一个单一状态,弄得本是菜鸟的我硬生生折磨了一上午画了几个 ...

  3. 8. javacript高级程序设计-BOM

    1. BOM 1.1 window BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象有双重身份, 1.1.1 全局作用域 由于window对象同时扮演着ECMASc ...

  4. 初识 MySQL 5.6 新特性、功能

    背景: 之前介绍过 MySQL 5.5 新功能.参数,现在要用MySQL5.6,所以就学习和了解下MySQL5.6新的特性和功能,尽量避免踩坑.在后续的学习过程中文章也会不定时更新. 一:参数默认值的 ...

  5. selinux

    root@lujie ~]# vim /etc/sysconfig/selinux # This file controls the state of SELinux on the system. # ...

  6. MyString(重写String)

    http://wenku.baidu.com/view/d7ac113243323968011c925b.html 已知类String的原型为: class String  { public:     ...

  7. 《Thinking in Java》十七章_容器深入研究_练习14(Page486)

    练习14 Properties的继承树如下:

  8. java 学习笔记——网络（Socket）

    阅读方法:将网页放大到200%. 如果你用过用过word应该知道按住ctrl键使用鼠标滚轮缩放.

  9. GB2312、GBK和UTF-8三种编码以及QT中文显示乱码问题

    1.GB2312.GBK和UTF-8三种编码的简要说明 GB2312.GBK和UTF-8都是一种字符编码,除此之外,还有好多字符编码.只是对于我们中国人的应用来说,用这三种编码 比较多.简单的说一下, ...

  10. Clr Via C#读书笔记---程序集的加载和反射

    #1 加载程序集 Assembly.Load: public class Assembly { public static Assembly Load(AssemblyName assemblyRef ...