3DD成效属性说明 _Web前端

3DD效果属性说明

属性	说明
-webkit-transform-style	有两种属性可选:preserve-3dplat设置为preserve-3d时为真3D设置为plat为伪3D(仿3d的2d效果)设置在最外层,可对内部的子元素起作用
-webkit-transform	rotateX(0deg) rotateY(0deg)rotateZ(0deg) translateX(-300px) translateY(-300px) translateZ(-300px);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 spin10s为播放10秒Infinite为无穷Linear为线性播放From… to是从什么状态开始到什么状态结束