查看效果：

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. dump、cpio、tar、dd四种备份工具比较

    原文  http://blog.csdn.net/ether_lai/article/details/12656219 dump dump可执行文件系统增量备份的存储操作 ,dump 可将目录或整个文 ...

  2. 不知道数据库中表的列类型的前提下,使用JDBC正确的取出数据

    概要: 使用jdbc 如果在不知道表结构的情况下,如何读出表信息? 使用ResultSetMetaData; 然后使用getColumnType 获取column 类型 使用getColumnName ...

  3. 13.SpringMVC和Spring集成(一) && 14.SpringMVC和Spring集成（二）

    1.概念 Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,Spring致力于J2EE应用的各层的解决方案,Spring是企业应用开发的“一站式”选择,并贯 ...

  4. Mathematics:Ultra-QuickSort(POJ 2299)

    极度快速排序 题目大意:在一个输入数组中找逆序数... 水题,求逆序数的很好的算法,就是MergeSort,和我之前发的DNA那个差不多,最后就是后台数据很大,答案要用long long #inclu ...

  5. webclient 和httpclient 应用

    //webclient应用 MyImageServerEntities db = new MyImageServerEntities(); public ActionResult Index() { ...

  6. 【leetcode】Reverse Linked List II （middle）

    Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1-> ...

  7. HDU 4314 Save the dwarfs (DP) ---转载

    题目:传送门. 这个是DP,比赛的时候用贪心写了好久没写出来. 题意: 有n个矮人被困在深度为h的井中,每个矮人都ai(脚到肩膀的高度)和bi(手臂长度), 当存在a1 + a2 + ... + ak ...

  8. python安装paramiko模块

    一.简介 paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接. 由于使用的是python这样的能够跨平台运行的语言,所以所有python支 ...

  9. CSS设置超出指定宽度自动换行

    一.背景 最近项目中有用到在div中显示用户反馈的信息,是指定宽度的div,超出要自动换行,开始写好后感觉应该没什么问题,后来自己随便输入测试数据的时候发现:如果是纯字母或者是纯数字就会出现超出了也不 ...

  10. ASP.NET 下载文件并继续执行JS解决方法

    需求说明:当用户点击按钮时使当前按钮为不可用,并打开新页面,关闭新页面时,按钮变为可用.并且如果不关闭新页面,当前按钮过10秒钟自动变为可用. 包含3个页面: 一.按钮页 前台代码:当刷新后采用js进 ...