CSS3skew倾斜-rotate旋转动画.docVIP

CSS3 skew倾斜、rotate旋转动画 css3出现之前，我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写，脚本代码较为复杂； 若需要实现倾斜、旋转之类的动画难度将更高（我还没试过用JavaScript或Jquery如何实现），而且即使能实现估计花的时间代价及维护难度是很大的，很多时候只能依靠画图工具制作此类动画文件； 有时候在想如果不用脚本语言，也不用画图工作制作动画文件，就能在网页上实现倾斜、旋转之类的动画效果多好。 最近挤出一些业余时间学习CSS3，其中就包含很多动画示例，花了点时间学习和整理 今天分享使用html+css3实现skew倾斜、rotate旋转动画，我们先看最终效果图（我这里为了演示效果，就用QQ屏幕截成多张图片，然后制作成gif动画给大家简单展示下，效果不好请大家多多包涵） 图1 具体步骤如下： 1、放置两个div，一个作为容器（图1中绿色背景部分?id=warp），另一个作为动画元素（图1中黄色背景部分?id=box） HTML代码： div?id=warp????div?id=boxWEB/div/div CSS代码（设置容器及动画元素默认样式）： #warp?{ width:?320px; height:?320px; background:?#6FDE82; margin:?20px?auto;}