CSS3的变形与过渡样式

时间：2011年12月8日分类：CSS 标签：Ajax‚ chrome‚ CSS‚ CSS3‚ firefox 评论：38

作为最新版的 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;