CSS3中的变形与动画
鼠标移动到指定的区域的某一个位置，触发改变div标签的长度，宽度，背景颜色和字体颜色。移除鼠标恢复原本的长度，宽度，背景颜色和字体颜色。（简称：鼠标移入移出改变事件）
eg：
<title>动画transform transition animation</title> <style> .wrapper { width:200px; height:200px; border:2px dotted #4AB01A; margin:200px; } .wrapper div{ width:200px; height:200px; background:#CF2225; line-height:200px; text-align:center; color:#fff; font-size:20px; /*transition-property:width height background color;*/ transition-property:all; transition-duration:2s; } .wrapper div:hover{ width:400px; height:400px; background:#2CD764; color:#C7E425; } </style> </head> <body> <div class="wrapper"> <div><span>哈哈，旋转(^_^)</span></div> </div> </body> CSS3动画CSS3在原来的基础上新增了变形和动画相关属性，通过这些属性可以实现以前需要大段JavaScript才能实现的功能。
CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换，这样的变换可以控制HTML组件呈现出丰富的外观。
借助于位移、旋转、缩放、倾斜这4种几何变换，CSS3提供了transition动画。transition动画比较简单，
只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化，并指定动画时间，就可保证动画播放。
比transition动画功能更强大的是animation动画，animation动画同样可以和位移、旋转、缩放、倾斜这4种几何变换结合，
但它可以指定多个关键帧，从而允许定义更加丰富的自定义动画。
CSS3动画----transform变形
transform：该属性用于设置变形，该属性支持一个或多个变形函数。
rotate(angle):该函数用于设置元素旋转的度数.
例如：transform：rotate(30deg);
skew(sx,yx):该函数用于设置元素的一个扭曲效果。
例如：transform:skew(10deg,20deg);
scale(sx,xy):该函数用于设置元素的缩放效果。
translate(tx,ty):该函数用于设置元素的位移。
matrix(m11,m12,m21,m22,dx,dy):该函数是一个基于矩阵变换的函数。
前面的4个参数将组成变形矩阵,后面的dx,dy主要是指在坐标轴上的一个偏移量。
01变形–旋转 rotate()
rotate()旋转：旋转rotate(-30deg)函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。
如果这个值为正值，元素相对原点中心顺时针旋转；
如果这个值为负值，元素相对原点中心逆时针旋转。
用法：transform:rotate(-30deg);
效果：
关于加上浏览器的前缀：
transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-moz-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
-mz-transform:rotate(-30deg);
为什么要加前缀 ？
css标准中各个属性都要经历从草案到定稿的过程，css3中的属性进展都不一样。
浏览器厂商在标准尚未明确情况下提前支持会有风险，而且各个浏览器对CSS3的支持也不同，
所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的css3新属性。
目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。
前缀 浏览器
? -webkit chrome和safari
? -moz firefox
? -mz IE
? -o opera
? 注意：IE9版本以下不支持，所以就算加上前缀也是没用的。
Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器。
Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，
是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。
02变形–扭曲 skew ()
skew()扭曲：扭曲skew()函数能够让元素倾斜显示。
它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。
这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。
skew()函数不会旋转，而只会改变元素的形状。
skew()具有三种情况：
1、skew(x,y)使元素在水平和垂直方向同时扭曲
（X轴和Y轴同时按一定的角度值进行扭曲变形）；第一个参数对应X轴，第二个参数对应Y轴。
如果第二个参数未提供，则值为0，也就是Y轴方向上无斜切。
2、skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；
3、skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形）;
用法：transform:skew(10deg,10deg);
效果：
03变形–缩放 scale()
scale()缩放：scale()函数让元素根据中心原点对对象进行缩放。
缩放 scale 具有三种情况：
1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #CSS3变形和动画 #transition #dotted
