《css34实用实用教案》由会员分享，可在线阅读，更多相关《css34实用实用教案（10页珍藏版）》请在金锄头文库上搜索。
1、2D变换(binhun)lTransformlrotate()旋转函数取值度数(dshu)ldeg度数(dshu)ltransform-origin旋转的基点lskew()倾斜函数取值度数(dshu)ldeg度数(dshu)lskewX()lskewY()第1页/共9页第一页，共10页。2D变换(binhun)2lTransformlscale()缩放函数取值正数、负数和小数lscaleX()lscaleY()ltranslate()位移函数像素(xins)值ltranslateX()ltranslateY()l实例：钟表效果第2页/共9页第二页，共10页。3d变换(binhun)1ltran
2、sform-style（preserve-3d）建立3D空间lperspective景深(Z轴)lperspective-origin景深基点(jdin)ltransform新增函数lrotateX()lrotateY()lrotateZ()ltranslateZ()/前后移动lscaleZ()/Z轴缩放倍数l实例：3D盒子第3页/共9页第三页，共10页。animationl关键帧keyFramesl类似于flashl只需指明两个状态，之间的过程由计算(jsun)机自动计算(jsun)l关键帧的时间单位l数字：0%、25%、100%等l字符：from(0%)、to(100%)l格式lkeyfr
3、ames动画名称ll动画状态l第4页/共9页第四页，共10页。animate关键帧l格式(gshi)(2)lkeyframesyema_testllfrombackground:red;ltobackground:green;ll可以只有tolanimation-fill-mode:forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。第5页/共9页第五页，共10页。animate调用(dioyng)动画l调用的标签(#div1、xxx:hover之类的)l必要(byo)属性lanimation-name动画名称（关键帧名称）lanimation-duration动画持
4、续时间l例如：l-webkit-animation-name:xinzhuoyue;l-webkit-animation-duration:4s;l练习：做一个进度条加载效果lanimation-play-state播放状态（running播放和paused暂停）第6页/共9页第六页，共10页。animate可选属性(shxng)l可选属性lanimation-timing-function动画运动形式llinear匀速。lease缓冲。lease-in 由慢到快。lease-out 由快到慢。lease-in-out由慢到快再到慢。lcubic-bezier(number,number,nu
5、mber,number) ：特定(tdng)的贝塞尔曲线类型，4个数值需在0,1区间内第7页/共9页第七页，共10页。animate可选属性(shxng)(2)l可选属性(2)lanimation-delay动画延迟l只是第一次lanimation-iteration-count重复次数linfinite为无限次lanimation-direction播放前重置l动画是否重置后再开始播放lalternate 动画直接从上一次停止的位置开始执行lnormal 动画第二次直接跳到0%的状态开始执行l实例：无缝(wfn)滚动第8页/共9页第八页，共10页。感谢您的欣赏(xnshng)！第9页/共9页第九页，共10页。内容(nirng)总结2D变换。transform-style（preserve-3d）建立3D空间。translateZ()/前后移动。scaleZ()/Z轴缩放倍数。animation-fill-mode:forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。调用的标签(#div1、xxx:hover之类的)。animation-name动画名称(mngchng)（关键帧名称(mngchng)）。第8页/共9页。感谢您的欣赏第十页，共10页。
