CSS3 的 3D 变换
transform 属性
| attr | des | css level |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 3 |
| transform-origin | 允许你改变被转换元素的位置。 | 3 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
| perspective | 规定 3D 元素的透视效果。 | 3 |
| perspective-origin | 规定 3D 元素的底部位置。 | 3 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
@transfrom 兼容性
IE10，firefox 以及 Opera 支持 @keyframe，而 chrome 和 safari 需要加浅醉-webkit-，IE9 及早期 IE 版本是不支持的，所以这些功能一般是在移动端使用.
一个 demo
这个 div 会沿着 Y 轴旋转 130deg
|
1 2 3 4 5 |
div { transform: rotateY(130deg); } |
一个 H5 上的应用场景
实现一个旋转木马的效果，这里列出核心代码，完整的后续放在 github 上
核心是 css 代码
一个 div 作为舞台的
|
1 2 3 4 5 6 |
<div <span class="keyword">class</span>=<span class="string">"container"</span>> </div> .container { perspective: <span class="number">800</span>px; <span class="comment">//这里是一个视角的位置，</span> } |
perspective 800px 是一个视角的位置，表示屏幕距离 3d 变化中心点的位置，一般是这个经验值，可以设置大一点，这样你看到的动画什么的就会离你很远。。。。
一个容器
|
1 2 3 4 5 6 7 8 |
<div <span class="keyword">class</span>=<span class="string">"container"</span>> <ul id=<span class="string">"js-course-list-3"</span> <span class="keyword">class</span>=<span class="string">"m-courseList"</span>></ul> </div> .m-courseList { transform-style: preserve-<span class="number">3</span>d; } |
preserve-3d 是透视属性，有了这个用户看到的效果才有空间感，没有的话看到的效果就和 2d 没区别了。
所有卡片给到一个旋转的角度
用模板实现是很方便的一件事情
|
1 2 |
style="transform: rotateY(<%=opt.deg%>deg) translateZ(<%=opt.tz%>px);-webkit-transform: rotateY(<%=opt.deg%>deg) translateZ(<%=opt.tz%>px)" |
默认情况下上面所有的卡片效果看起来是旋转了，但是都挤到一起去了，上面的 translateZ 是让每个卡片向它们的正前方平移一个具体的，这样看来才会形成一个类似立体圆柱的效果，也就是旋转木马的效果了
要让它动起来，js 也少不了，在每次滑动结束后触发每个卡片的旋转
|
1 2 3 4 5 6 7 |
$.map(M.lis, <span class="keyword">function</span>(item, i) { <span class="keyword">var</span> deg = Math.floor(<span class="number">360</span>/M.max); $(item).css({ transform: <span class="string">'rotateY('</span>+ (index+i) * deg+<span class="string">'deg) translateZ('</span> + <span class="number">130</span> / Math.tan(deg /<span class="number">360</span> * Math.PI) +<span class="string">'px)'</span> }) }); |
CSS3 @keyframe 规则
属性
| attr | des | css level |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
| animation-delay | 规定动画何时开始。默认是 0。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
@keyframe 兼容性
IE10，firefox 以及 Opera 支持 @keyframe，而 chrome 和 safari 需要加浅醉-webkit-，IE9 及早期 IE 版本是不支持的，所以这些功能一般是在移动端使用
一个 demo
该 demo 的作用是使 div 的背景从红色变成绿色，整个动画时间是 5s
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@keyframes myfirst { from {background: red;} to {background: yellow;} } div { animation: myfirst <span class="number">5</span>s; -moz-animation: myfirst <span class="number">5</span>s; <span class="comment">/* Firefox */</span> -webkit-animation: myfirst <span class="number">5</span>s; <span class="comment">/* Safari 和 Chrome */</span> -o-animation: myfirst <span class="number">5</span>s; <span class="comment">/* Opera */</span> } |
一个 H5 上的应用场景
H5 页面分屏的时候，底部一般会有一个小三角上下移动，表示还有一页内容的。
代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
.item-1::after { position: absolute; left: 50%; margin-left: -11px; bottom: 1%; content: ''; background: url(../img/arrow.png) no-repeat center top; height: 22px; width: 20px; -webkit-animation: hover1 1s ease-in-out infinite alternate; animation: hover1 1s ease-in-out infinite alternate; -webkit-background-size: contain; background-size: contain; } @-webkit-keyframes hover1{ 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0px); } } @keyframes hover1{ 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } |
可直接套用运行
最后的最后
在经历上面一番折腾之后，其实最终实现了的是另一种效果，感兴趣的同学可以用手机访问这里，看看第二页的效果。动画没什么特别，主要是变来变去的过程中用到了一些新的东西。
