当前位置: 代码迷 >> HTML/CSS >> CSS3成效的属性用法
  详细解决方案

CSS3成效的属性用法

热度:148   发布时间:2012-06-29 15:48:46.0
CSS3效果的属性用法
  1. rotate
    Rotate(旋转)允许你通过传递一个度数值来转动一个对象。
  2. scale
    Scale是一个缩放功能,可以让任一元素变的更大。它使用正数和负数以及小数作为参数。
  3. translate
    Translate就是基于X和Y 坐标重新定位元素
  4. skew
    顾名思义,skew就是要将对象倾斜,参数是度数
  5. matrix
  6. transform支持矩阵变换,就是基于X和Y 坐标重新定位元素

1.rotate:

       {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	}

?负数表示逆时针,正数表示顺时针旋转,deg是单位度。

?IE有这方面的滤镜:图形旋转滤镜。它可以有4个旋转值:0, 1, 2,和3,无法获得和Webkit一样的精密控制。

?

2.scale:

       {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1); 
	-o-transform: scale(1.1); 
	}

?元素放大1.1倍

?

3.translate:

       {
	-moz-transform: translate(10px, 20px);
	-webkit-transform: translate(10px, 20px); 
	-o-transform: translate(10px, 20px); 
        }

?正数的方向是向下向右,这里,可以让元素向下向右分别位移10,20像素。

?

4.skew:

        {
	-moz-transform: skew(30deg, -10deg);
	-webkit-transform: skew(30deg, -10deg); 
	-o-transform: skew(30deg, -10deg); 
         }

????? Skew也是一个很有用的transform功能,它可以将一个对象围绕着x和y轴按照一定的角度倾斜。这和rotate的旋转不一样,rotate只是旋转,而不会让元素的形状改变。skew会让一个元素的形状改变。skew有两个参数,分别代表x和y轴的倾斜度数。

????? 有兴趣深入研究,可以看一下这里http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined,这是SVG的一个文档,但是对于matrix变换的原理是通用的。

?

可以链式写在一些,使代码更高效:

?

       {
	-moz-transform: translate(10, 25) rotate(90deg) scale(2, 1);
	-webkit-transform: translate(10, 25) rotate(90deg) scale(2, 1); 
	-o-transform: translate(10, 25) rotate(90deg) scale(2, 1); 
	} 
?

连续的动画的属性transition:

?

{
	-webkit-transition:all .2s ease;
		-moz-transition:all .2s ease;
		transition:all .2s ease;
}
?