CSS3的变形与过渡样式

作为最新版的 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 10.50+、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 发表,本文链接:http://kayosite.com/about-css3-transform-transition.html

评论列表

1 2

回复

你正在以游客身份访问网站,请输入你的昵称和 E-mail
:wink: :roll: :oops: :mrgreen: :idea: :cry: :?: :-| :-o :-P :-? :) :( 8-O