作为最新版的 CSS ， CSS3 就像传说中的一样，的确很神奇，配合 HTML5 后可以直接忽略 flash 了！不过杯具的是只有 chrome 、 Firefox 、 safari 等现代浏览器部分支持 CSS3 ,因此做正式站点的话还不能大规模的使用。但是在网站的某些部分使用一些CSS3却能很好的增强网页的画面效果，比如 Melody 的评论者头像就使用了 CSS3 的图片悬停动画，在不支持 CSS3 的浏览器中并没有影响评论部分的样式，却能带给使用支持 CSS3 浏览器的读者很大的用户体验，这无疑是加强网页效果的很好选择。下面详细介绍一下 CSS3 的变形与过渡样式。
一.变形——transform
兼容浏览器：Firefox 3.5+、Chrome 2.0+、Safari 3.1+、Opera 11.01+、IE9
1.旋转
旋转图片，单位deg，为“度”的意思
-moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); -o-transform: rotate(20deg); -ms-transform: rotate(20deg);
2.放大缩小
按比例放大缩小，如 “1.6” 为放大 1.6 倍，若 “-1.6” 则缩小 1.6 倍
-webkit-transform: scale(1.6); -moz-transform: scale(1.6); -o-transform: scale(1.6); -ms-transform: scale(1.6);
除了 rotate() ， scale() 外还有 skew() ， translate() 属性 ，另外分别还有横向、竖向之分，如：rotatex()、rotatey()。 有兴趣折腾的童鞋可以参考 CSS 参考手册
二.变形原点——transform-origin
设置或检索对象以某个原点进行转换，即该对象围绕着一个点变形或旋转，该样式只有在设置了 transform 样式时起作用
兼容浏览器：Firefox 3.5+、Chrome 2.0+、Safari 3.1+、Opera 11.01+、IE9+
例子1: 对象围绕左下角一点旋转20度（配合“一.变形——1.旋转中的rotate属性”）
-moz-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; -o-transform-origin: 0 100%; -ms-transform-origin: 0 100%;
另外还可以使用数值作为坐标值。例子2: 对象围绕右下角一点旋转20度（配合“一.变形——1.旋转中的rotate属性”）
-moz-transform-origin: 128px 128px; -webkit-transform-origin: 128px 128px; -o-transform-origin: 128px 128px; -ms-transform-origin: 128px 128px;
三.过渡——transition
很神的CSS样式，可以用来做出自定义的 CSS 动画。
兼容浏览器：Chrome 2.0+、Safari 3.1+、Firefox 4.0+、Opera 11.01+
先来一个例子：transition: background-color .5s ease-in .1s;
具体写法（假设 a 标签的 class 为 tran ）
a.tran {display: block; margin-left: 30px; width: 150px; height: 150px; background-color: #EEE; -webkit-transition: background-color .5s ease-in .1s; -moz-transition: background-color .5s ease-in .1s; -o-transition: background-color .5s ease-in .1s; }
a.tran:hover {background-color: #FF9900; }
属性从左到右分别设置动画样式，动画持续时间，过渡方式，过渡时间，也可以分别使用
transition-property: background-color;
transition-duration: .5s;
transition-timing-function: ease-in;
transition-delay: .1s;
看完了上面的效果后，大家应该对 CSS3 的变形与过渡样式有所了解了，这无疑是两种具有良好用户体验的效果，用在图片上效果更加明显！喜欢 CSS3 的童鞋果断试试。
本文由 Kayo Lee 发表，本文链接：https://kayosite.com/about-css3-transform-transition.html
评论列表
CSS3 和 HTML5 组合绝配
@邓芝 两个神器一起使用，绝对秒了flash
这类用的少，常用的是圆角和阴影……再等等
@zwwooooo 嗯，这类效果只能用作点缀主题，用多了杯具的IE也不支持！
@Kayo 所以说再等等 :-D
这个都试了试?
很喜欢的说
估计有些会被很快用到的 不止是我
嘿嘿 现在这年头 会动的才是健康的
@心淡若水 现在已经有不少网站加入了一些CSS3和HTML5的元素了，慢慢会流行起来，给前端一个大变身。
生命在于折腾，神马都得试试嘛！
@心淡若水 你是不是隱喻我不健康呢？
@Leyar 学姐是不是隱喻自己不爱动
@Kayo
哥们猜对了 不过她是小学妹
@心淡若水 一个不小心成学姐了，改不了
@Leyar
如鱼饮水 冷暖自知
过渡效果:有点开始泛滥了
@无冷 嗯，这类效果的确不能用太多，稍作修饰便刚好！
這個我感興趣。 哈哈～～
雖然我的 CSS學的不倫不類。 不過這個很喜歡。 哈哈～
不懂學姐請教你哈。
@Leyar 这类CSS动画使用起来并不困难，还有学弟耐心指导，学姐包学会！
@Kayo 那多謝學弟的耐心指導了。 哈哈。
準備考試了吧 ？這週末四級噢 ～
對了，還有，我的明信片收到了不?
@Leyar 嗯，准备考试了，这个月有两科！四级的话努力中，不过。。。。你懂的！
学姐的明信片一直没有收到，昨天去学校论坛泡泡，才知道原来要写班级姓名才会送到班级邮箱，没有写的话就会分发到收发室，学弟打算下午到收发室，呜呜，传说中的收发室，离宿舍的路程可是按公里算的！
@Kayo 拿到了跟我说下哈~
效果不错，CSS3 + HTML5 会很火的· :lol:
@gleaner 虽然CSS3 + HTML5成主流的这一天会很远，但还是会来的
Nice.
學習了
CSS3在IE下那就是个悲剧了。坑爹的IE。
@Demon IE本身就是个超级大杯具 :twisted:
每次说到万恶的IE就特激动了！
@Kayo IE。现在一想到要做兼容我就不淡定了。
大屌了…等我考完試..弄弄這個
@kkStx email打錯了..-,-lll
@kkStx 嘻嘻，看来很多人都在为考试忙碌了，话说很快我也考第一科了！
CSS3的效果用在修饰网站上还真是不错的，用户体验和外观都可以得到提升！
@Kayo 刚刚试了…我已经爱上了..咋办
@kkStx 那就勇敢爱下去
，CSS3效果真的很棒！
很喜欢这个过渡效果。
@wmtimes 给主题加入一些CSS3效果主题就更酷了
呵呵，学习，谢谢朋友分享
@陌凡 欢迎欢迎，谢谢支持！
俺得再学学才行！
博主好久没更新了