CSS3变形与动画效果示例：淡入淡出的transform
在CSS3中，可以利用transform功能来实现文字或者图像的旋转、缩放、倾斜、移动这四种变形处理。
transform基础知识
在CSS3中，通过transform属性来达到功能需求，我们这里来看一个例子：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> div { width: 300px; margin: 150px auto; background-color: Yellow; text-align: center; -webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg); -o-transform: rotate(45deg); } </style> </head> <body> <div>示例文字</div> </body> </html>
我就喜欢这种怪怪的东西！！！
现在我们再来简单看看transform的其它功能：
transform缩放
使用scale方法来实现文字或者图像的缩放功能，在参数中定义倍率：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center;
-webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); } div { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;} </style> </head> <body> <div>示例文字</div> <div class="y">示例文字</div> </body> </html>
我们看到了缩放的威力了
倾斜
这个方法用来实现文字或者图片的倾斜，在参数中分别指定水平方向上的倾斜角度，垂直方向上的倾斜角度：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center; -webkit-transform: skew(30deg, 30deg); -moz-transform: skew(30deg, 30deg); -o-transform: skew(30deg, 30deg); } div { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;} </style> </head> <body> <div>示例文字</div> <div class="y">示例文字</div> </body> </html>
移动
我们现在可以使用transform方法来使图片或者文字移动，在参数上分别指定水平、垂直的距离即可：
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center; -webkit-transform: transform(50px, 50px); -moz-transform: transform(50px, 50px); -o-transform: transform(50px, 50px); } div { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;} </style> </head> <body> <div>示例文字</div> <div class="y">示例文字</div> </body> </html>
这个功能我就感觉意义不大了。。。
总结
CSS3的这个功能提出来还是比较有意义的，比如我们的相册要实现旋转操作便简单多了，然后我们想实现模拟生活中放大镜等功能也会带来其他乐趣。
CSS3中的动画
在CSS3中，如果使用动画功能，可以使页面上的文字或者图像具有动画效果，可以使背景色从一种颜色平滑过渡到另一种颜色！！！非常不错的特性
CSS3中动画功能分为Transitions功能与Animation功能，他们都可以改变CSS中的属性来产生动画效果。
Transitisions支持元素由一种属性平滑过渡到另一个属性，Animations功能支持通过关键帧来指定在页面上产生更复杂的动画效果。
Transitions
transition属性使用方法如下：
transition: property duration timing-function
参数一表示要对哪个属性进行平滑过渡
参数二表示多长时间完成
参数三表示通过什么方法来平滑过渡<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .y { background-image: url(1.jpg); width: 1340px; height: 900px; text-align: center; -webkit-transition: background-image 3s linear; -moz-transition: background-image 3s ulinear; -o-transition: background-image 3s linear; } .y:hover { background-image: url(2.jpg);} </style> </head> <body> <div class="y">示例文字</div> </body> </html>
效果着实不差，但是很多浏览器不支持哟！
多个属性变形transition缺点：
transition功能实现的动画只能指定属性的开始值以及结束值，不能实现更加复杂的效果，但Animations就可以！
Animations
该功能与transition基本一致，只不过其控制力度更细而已.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> .y { background-image: url(1.jpg); width: 1340px; height: 900px; text-align: center; } @-webkit-keyframes myImg { 40% { background-image: url(yexiaochai.jpg); } 100% { background-image: url(2.jpg); } } .y:hover { -webkit-animation: myImg 3s linear; } </style> </head> <body> <div class="y">示例文字</div> </body> </html>
我想说，他闪瞎了我的合金狗眼！！！
最后，让我们用以上功能实现一个我一直想要的功能：
实现网页淡入淡出
核心代码
@-webkit-keyframes fadein
{
0% { opacity: 0; }
100% { opacity: 1; }
}
body { -webkit-animation: fadein 3s linear 2; }完整例子
本文作者：叶小钗
"