最近有个想法，要做一个仿iPhone日历的选择器插件，最终效果要如下图：
开始
首先注意到这些数字是按照滚轮的方式排列的，就先实现这个效果吧。
3D的世界中有个重要属性，transform rotate，其中rotateX效果如下
<img src="favicon.ico" style="transform:rotateX(0deg);"> <img src="favicon.ico" style="transform:rotateX(10deg);"> <img src="favicon.ico" style="transform:rotateX(20deg);"> <img src="favicon.ico" style="transform:rotateX(30deg);"> <img src="favicon.ico" style="transform:rotateX(40deg);"> <img src="favicon.ico" style="transform:rotateX(50deg);"> <img src="favicon.ico" style="transform:rotateX(60deg);"> <img src="favicon.ico" style="transform:rotateX(70deg);"> <img src="favicon.ico" style="transform:rotateX(80deg);"> <img src="favicon.ico" style="transform:rotateX(90deg);">
这个太阳看着一个比一个扁，其实他们再沿着X轴做旋转呢。旋转都有一个旋转中心，默认就是自己的中心点，但我们可以通过translateZ来修改这个中心点，如果让一组图片绕着同一个中心点旋转，不就能组成上文的滚轮了吗
<ul class="picker_ul"> <img src="favicon.ico" style="transform:rotateX(0deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(10deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(20deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(30deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(40deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(50deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(60deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(70deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(80deg) translateZ(50px);"> <img src="favicon.ico" style="transform:rotateX(90deg) translateZ(50px);"> </ul>
效果如下：
这里旋转的角度，translate的具体还是需要经过计算的。我们计划用十张图片围成一个圆，那步长应该是36deg，图片是48*48，所以半径应该是480/2/3.1415926=77px，再改：
终于有点样子了
第二步 非当前值置灰
观察iPhone日历选择器，除了滚轮效果，还有逐渐置灰效果，越近越清晰，越远越模糊。
可以用一个透明的遮罩遮在上面，越靠近中间不透明度越低，越靠近两边不透明度越高。这里使用-webkit-linear-gradient来实现再合适不过了
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
-webkit-linear-gradient就是一个颜色透明度的线性渐变，我们可以控制几个渐变点
如：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="format-detection" content="telephone=no"> 6 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 7 <title>时间日期选择器</title> 8 <style> 9 body{margin:0;} 10 ul{margin:0;padding:0;list-style:none; 11 -webkit-transition:transform 1s; 12 } 13 img{text-align:center;line-height:30px;font-size:1.1em; 14 -webkit-transition:opacity 1s, transform 1s;position:absolute;right:50%;top:60px; 15 } 16 .picker{position:relative;height:180px;} 17 .picker_ul{position: absolute;z-index:1;width:100%;overflow:hidden;height:100%;} 18 .picker_panel{position:absolute;z-index:2;width:100%;height:100%;top:0; 19 background:-webkit-linear-gradient(top, rgb(255, 255, 255) 0, rgba(220, 220, 220, 0) 48%, rgba(220, 220, 220, 0) 52%, rgb(255, 255, 255) 100%);} 20 </style> 21 </head> 22 <body> 23 <div id="demo2"> 24 <div class="picker"> 25 <ul class="picker_ul"> 26 <img src="favicon.ico" style="transform:rotateX(-72deg) translateZ(77px);"> 27 <img src="favicon.ico" style="transform:rotateX(-36deg) translateZ(77px);"> 28 <img src="favicon.ico" style="transform:rotateX(0deg) translateZ(77px);"> 29 <img src="favicon.ico" style="transform:rotateX(36deg) translateZ(77px);"> 30 <img src="favicon.ico" style="transform:rotateX(72deg) translateZ(77px);"> 31 <img src="favicon.ico" style="transform:rotateX(108deg) translateZ(77px);"> 32 <img src="favicon.ico" style="transform:rotateX(144deg) translateZ(77px);"> 33 <img src="favicon.ico" style="transform:rotateX(180deg) translateZ(77px);"> 34 <img src="favicon.ico" style="transform:rotateX(216deg) translateZ(77px);"> 35 <img src="favicon.ico" style="transform:rotateX(252deg) translateZ(77px);"> 36 </ul> 37 <div class="picker_panel"></div> 38 </div> 39 </div> 40 <script src="lib/zepto.js"></script> 41 </body> 42 </html>