查看效果：

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. ZOJ 3812 We Need Medicine（dp、背包、状态压缩、路径记录）

    参考:http://blog.csdn.net/qian99/article/details/39138329 参考的链接里说明得很好,注释也很好...thanks for sharing 朴素的想法 ...

  2. ref 和 out

    两者都是按地址传递的,使用后都将改变原来的数值.很多人在论坛上解释说out是按数值传递,是错误的.简单的测试后可以知道out使用也能改变数值的,所以肯定是按照地址传递的.其次:rel可以把参数的数值传 ...

  3. 仿美团外卖,饿了吗 两个ListView联动,左边点击切换右边,右边滑动切换左边

    先上效果图: 实现思路: 1.先说右边标题: 首先,右边的数据源集合中的Javabean中含有三个属性name,type,title,而每个条目中会默认含有一个标题. 如果这是第一个条目,就让标题显示 ...

  4. 【leetcode】Binary Tree Level Order Traversal I & II

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  5. xmpp xml基本语义

    基本语义 9.2.1 消息语义 <message/>节种类可被看作“推”机制,一个实体推信息给其它实体,与 EMAIL 系统中发生的通信类似.所有消息节应该拥有‘to’ 属性,指定有意的消 ...

  6. ppt动画制作bullets

    动画->效果选项->作为一个对象 这样之后,字总是在一段时间后就自己出来,而不是我们点一下再出来,解决方法是对同一段字重复设置,后面那个会默认是点一下,出一张,在把之前的动画删除即可.

  7. android 开发赚钱

    原 android 开发赚钱 谁带我去看看世界 发布时间: 2015/06/09 12:05 阅读: 1589 收藏: 37 点赞: 2 评论: 5 开发android也有一年左右了,利用业余时间陆续 ...

  8. FastPolice项目总结

    This is the final homework for spatial information Mobile Service Lesson.It generally inclusived the ...

  9. 三、jQuery--Ajax基础--Ajax全接触--JSON

    JSON基本概念 JSON:JavaScript对象表示法(JavaScript Object Notation) JSON是存储和交换文本信息的语法,类似XML.它采用键值对的方式来组织,易于人们阅 ...

  10. C#学习笔记----.net操作进程

    进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.进程之间是相对独立的,一个进程无法直接访问另一个进程的数据(除非分布式),一个进程运行的失败也不会影响其他 ...