前言
这个标题比较狗血了，我一直知道CSS3可以做很多事情，但是我昨天看到一个人用CSS3华丽的画了一个太极八卦！
若是这个还可以接受，那么我今天就看见一个人用CSS3画了一个叮当猫！！！我突然就在想，你们究竟要闹哪样，实在太BT了！
我在想我最近几天是不是应该试试呢？虽然我CSS比较水了。。。
CSS3中的变形
在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; }
复制代码
完整例子
结语
这两章的知识点非常实用，特别是后面的动画效果，将会带来很好的用户体验！
当然用得好就是酷，用的不好就是花花绿绿很难看了，另外不知道性能问题怎么样了？
本文转自叶小钗博客园博客，原文链接http://www.cnblogs.com/yexiaochai/archive/2013/04/27/3046687.html如需转载请自行联系原作者
