睡了13个小时，发烧终于退了，持续2周的感冒看起来终于好了点，这一周一直在看perspective的一些资料，写一个3D跑马灯的效果。

　　

　　个人感觉主要就是理解视角的概念，也就是perspective和perspective-origin这2个 属性，其他都比较简单。

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>3D跑马灯</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

<meta name="format-detection" content="telephone=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<style>

/*css reset*/

html{font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;}

body{-webkit-overflow-scrolling:touch;margin:0;}

ul{margin:0;padding:0;list-style:none;outline:none;}

dl,dd{margin:0;}

a{display:inline-block;margin:0;padding:0;text-decoration:none;background:transparent;outline:none;color:#000;}

a:link,a:visited,a:hover,a:active{text-decoration:none;color:currentColor;}

a,dt,dd{-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;}

img{border:0;}

p{margin:0;}

input,button,select,textarea{margin:0;padding:0;border:0;outline:0;background-color:transparent;}

/*css*/

body {

    height: 100vh;

    text-align: center;

}

.stage {

    position: relative;

    display: inline-block;

    margin: 0 auto;

    padding: 40px 0;

    max-width: 750px;

    perspective: 600px;

}

.stage .container {

    position: absolute;

    width: 100px;

    height: 100px;

    transform-style: preserve-3d;

}

.stage .container .list {

    position: absolute;

    width: 100px;

    height: 100px;

    font-size: 14px;

    text-align: center;

    line-height: 100px;

    /*backface-visibility:hidden;*/

    background-color: #22bfe0;

}

</style>

</head>

<body>

<div class="stage">

    <ul id="container" class="container">

    </ul>

</div>

<script>

    var doc = document,

        fragment = doc.createDocumentFragment(),

        $ = function(node) {

            return doc.querySelector(node);

        };

    var listArr = [0, 1, 2, 3, 4, 5, 6, 7],

        length = listArr.length,

        averRotate = 360 / length,

        averTransZ = 60 / Math.tan((averRotate / 2 / 180) * Math.PI);

    listArr.forEach(function(i) {

        var node = doc.createElement('li');

        node.setAttribute('id', 'list' + i);

        node.setAttribute('class', 'list');

        node.innerHTML = i;

        fragment.appendChild(node);

    });

    $('.container').appendChild(fragment);

    listArr.forEach(function(i) {

        $('#list' + i).style.transform = 'rotateY(' + i * averRotate + 'deg) translateZ(' + (averTransZ + 20) +'px)';

    });

    var index = 0;

    setInterval(function() {

        $('#container').style.transform = 'rotateY(' + ++index + 'deg)';

    }, 1000 / 60)

</script>

</body>

</html>

3D跑马灯效果的更多相关文章

  1. TextView跑马灯效果

    转载:http://www.2cto.com/kf/201409/330658.html 一.只想让TextView显示一行,但是文字超过TextView的长度怎么办?在开头显示省略号 android ...

  2. Android_TextView之跑马灯效果

    对于android控件中的TextView,相信大家一定不陌生,在显示文本内容时十分方便.不过我在使用时遇到一个小问题,就是当文字交多时,如何为用户进行展示.今天就为大家介绍一种解决方案--跑马灯效果 ...

  3. android中实现跑马灯效果以及AutoCompleteTestView与MultiAutoCompleteTextView的学习

    跑马灯效果 1.用过属性的方式实现跑马灯效果 属性:                  android:singleLine="true" 这个属性是设置TextView文本中文字 ...

  4. Android 实现多行文本跑马灯效果

    Android TextView 实现跑马灯的效果很简单,只要加三个属性就可以了. android:ellipsize="marquee" android:focusable=&q ...

  5. android:ellipsize实现跑马灯效果总结（转）

      最近无意间看到了涉及到跑马灯效果的代码,于是在网上查阅了很多资料,在这里对自己看的一些文章进行一下总结,顺便加上自己的一些体会. 让我们一步步逐渐向下. 首先我们要实现走马灯这样一个效果,通常来说 ...

  6. flex 简单跑马灯效果（竖着显示）

    <mx:Move id="move_area" target="{VBox_AreaWarning}"/> //move效果,模拟跑马灯 <s ...

  7. Dom操作--跑马灯效果

    这里给园友们演示的是Dom操作实现跑马灯效果,相信我们很多人都用Winform实现过跑马灯效果,其中的关键就是Tirm控件,那么在Dom操作中是用setInterval方法来实现隔一段时间执行一段代码 ...

  8. [Android1.5]TextView跑马灯效果

    from: http://www.cnblogs.com/over140/archive/2010/08/20/1804770.html 前言 这个效果在两周前搜索过,网上倒是有转载,可恨的是转载之后 ...

  9. Android学习总结——TextView跑马灯效果

    Android系统中TextView实现跑马灯效果,必须具备以下几个条件: 1.android:ellipsize="marquee" 2.TextView必须单行显示,即内容必须 ...

随机推荐

  1. 【微信小程序】 引用公共js里的方法

    一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们 ...

  2. SVN访问版本库精细的权限控制

    SVN精细权限控制本章将详细介绍前一章所涉及的两个配置文件, svnserve.conf 和 authz.conf,通过对配置逐行的描述,来阐明其中的一些细节含义.除此之外的其他配置.安装等内容,不是 ...

  3. C输出大于127的ACSII字符

    近期,我们的DNS服务器收到了一些异常的域名请求,从访问日志看到很多域名都被返回了FORMAT ERROR的错误码,但是访问日志中的域名看起来很正常啊,为什么会返回FORMAT ERROR的错误码呢? ...

  4. 微信小程序 HelloWorld

    本篇文章由:http://xinpure.com/micro-applet-helloworld/ 微信官方文档及工具已经开放!!! https://mp.weixin.qq.com/debug/wx ...

  5. jseclipse 是eclipse插件，让你编写js代码感觉更爽

    一直以来都没有客意的去找一下eclipse下面的javascript开发插件,今天在网上无意发现了一个,回去试了一下,感觉不错.写JS代码根写PHP代码差不多感觉挺爽的.JSEclipse是个Ecli ...

  6. asp.net core mvc视频A：笔记4-1.数据验证

    开发建议:永远不要相信客户端提交过来的数据!!! 前端数据验证定位:提高用户体验,仅此而已! 后端数据验证定位:保证系统安全与数据完整!!! 实例:用户登录验证 定义一个用户登录类 在用户登录类基础上 ...

  7. WebADI_WebADI工作日志设定（案例）

    20150707 Created By BaoXinjian

  8. 可重入函数、线程安全、volatile

    一. POSIX 中对可重入和线程安全这两个概念的定义: Reentrant Function:A function whose effect, when called by two or more  ...

  9. 定制WinEdt 优化Latex输入

    定制WinEdt 优化Latex输入 ---原文转载地址:http://www.mamicode.com/info-detail-342716.html ---推荐winedt功能定制使用-说明文档: ...

  10. ps钢笔工具 （重要工具）

    ps钢笔工具 ctrl键 + 鼠标选中操作的点 = 移动点 alt键 + 方点 + 拖拉 = 拖出两个手柄 和 控制两端弧度 alt键 + 圆点 = 控制单向弧度