| 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 |
IE10，firefox以及Opera支持@keyframe，而chrome和safari需要加浅醉-webkit-，IE9及早期IE版本是不支持的，所以这些功能一般是在移动端使用.
这个div会沿着Y轴旋转130deg
div
{
transform: rotateY(130deg);
}
实现一个旋转木马的效果，这里列出核心代码，完整的后续放在github上
<div class="container">
</div>
.container {
perspective: 800px; //这里是一个视角的位置，
}
perspective 800px是一个视角的位置，表示屏幕距离3d变化中心点的位置，一般是这个经验值，可以设置大一点，这样你看到的动画什么的就会离你很远。。。。
<div class="container">
<ul id="js-course-list-3" class="m-courseList"></ul>
</div>
.m-courseList {
transform-style: preserve-3d;
}
preserve-3d是透视属性，有了这个用户看到的效果才有空间感，没有的话看到的效果就和2d没区别了。
用模板实现是很方便的一件事情
style="transform: rotateY(<%=opt.deg%>deg) translateZ(<%=opt.tz%>px);-webkit-transform: rotateY(<%=opt.deg%>deg) translateZ(<%=opt.tz%>px)"
默认情况下上面所有的卡片效果看起来是旋转了，但是都挤到一起去了，上面的translateZ是让每个卡片向它们的正前方平移一个具体的，这样看来才会形成一个类似立体圆柱的效果，也就是旋转木马的效果了
$.map(M.lis, function(item, i) {
var deg = Math.floor(360/M.max);
$(item).css({
transform: 'rotateY('+ (index+i) * deg+'deg) translateZ(' + 130 / Math.tan(deg /360 * Math.PI) +'px)'
})
});
| 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 |
IE10，firefox以及Opera支持@keyframe，而chrome和safari需要加浅醉-webkit-，IE9及早期IE版本是不支持的，所以这些功能一般是在移动端使用
该demo的作用是使div的背景从红色变成绿色，整个动画时间是5s
@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
H5页面分屏的时候，底部一般会有一个小三角上下移动，表示还有一页内容的。
代码如下：
.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);
}
}
可直接套用运行
在经历上面一番折腾之后，其实最终实现了的是另一种效果，感兴趣的同学可以用手机访问这里，看看第二页的效果。动画没什么特别，主要是变来变去的过程中用到了一些新的东西。