3DD效果属性说明

[table]
|[b]属性[/b]|[b]说明[/b]
|-webkit-transform-style|有两种属性可选:
[color=violet]preserve-3d[/color]
[color=violet]plat[/color]
设置为preserve-3d时为[color=red]真3D[/color]
设置为plat为[color=red]伪3D(仿3d的2d效果)[/color]
设置在最外层,可对内部的子元素起作用
|-webkit-transform|[color=violet]rotateX(0deg) rotateY(0deg)
rotateZ(0deg) translateX(-300px)
translateY(-300px) translateZ(-300px);[/color]
rotate为旋转效果.
X为围绕X轴旋转,
Y为围绕Y轴旋转,
Z为围绕原点旋转.
Translate为平移效果.
X为X轴平移
Y为Y轴平移
Z为Z轴平移(前后)
|-webkit-transition-property|动态动画效果选择属性.
transform, margin;
填入transform, margin的意思为如果该对象改变transform或者margin, 将会发生一个改变的动画效果.
需要和-webkit-transition-duration一起用
例如:

-webkit-transition-property: transform, margin;
-webkit-transition-duration: 1s;

|-webkit-transition-duration|设置对象的属性改变后产生动画的播放时间.
例如:1s
|-webkit-animation
@-webkit-keyframes spin|无穷动画播放.设置好时间, 播放形状进行动画播放
例如:

#movieposters li {float:left;
	-webkit-animation: spin 10s infinite linear;
}
@-webkit-keyframes spin {
      from { -webkit-transform: rotateY(0); }
      to   { -webkit-transform: rotateY(360deg); }
}

该例子说明动画播放<li>标签.
Spin为命名动画,对应@-webkit-keyframes spin
10s为播放10秒
Infinite为无穷
Linear为线性播放

From… to是从什么状态开始到什么状态结束
[/table]