DOM动画效果的基础入门2

一、动画效果 Transform字面上就是变形，改变的意思，在css3中transform主要包括以下几种： 选转 rotate，扭曲 skew 缩放 scale 和移动translate 以及矩形变形 matrix 。下面我们一起看看css3中transform 的旋转 rotate 扭曲 skew 缩放 scale 和移动Translate 例子： 语法 transform：none|||* 等价于 transform：rotate|scale|skew|translate|matrix； none：表示不进么变换 表示一个或多个变换函数 ，以空格分开 ：换句话说就是我们同时对一个元素进行Transform的多种属性操作，例如rotate、scale、translate三种 但这里需要提醒大家的，以往我们叠加效果都是用逗号隔开，但Transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开 旋转 rotate（）：通过指定的角度参数对元素指定一个2Drotation（2D旋转），需先有Transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置为正数表示顺时针旋转。如果设置的值是负数，则表示逆时针旋转，如果Transform：rotate（30deg） -ms-Transform：rotate（7deg） -ms代表ie内核识别码 -moz-transform：rotate（7deg）-moz代表火狐内核识别码 -webkit-Transform：rotate（7deg）-webkit代表谷歌内核识别码 -o-transform:rotate（7deg）-o 代表欧朋【opera】内核识别码 transform：rotate（7deg） 统一表示语句，最好这句话也写下去 符合w3c标准