请选择 进入手机版 | 继续访问电脑版

HTML5星空

HTML5星空 首页 HTML5教程 CSS3 查看内容

css3 2D变形之transform

2013-11-17 16:16| 发布者: admin| 查看: 1246| 评论: 0

摘要: 在css3中,加入了动画功能,这使得网页效果更加炫丽和简单。我们可以用css3的2d变形属性transform制作各种2d动画,比如图像旋转、倾斜、缩放、移动等。首先认识一下css3 transform属性,transform属性的初始值是none ...
css3中,加入了动画功能,这使得网页效果更加炫丽和简单。我们可以用css3的2d变形属性transform制作各种2d动画,比如图像旋转、倾斜、缩放、移动等。
首先认识一下css3 transform属性,transform属性的初始值是none,适用于块元素和行内元素。
transform的取值如下:

translate([, ]):
移动元素对象,基于X和Y坐标移动重新定位元素。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

translateX():指定对象X轴(水平方向)的平移
translateY():指定对象Y轴(垂直方向)的平移
rotate()
旋转元素对象,即指定对象的2D旋转,按照 ransform-origin 属性的定义为基点,默认为 center,center。
允许传递的是一个度数值来进行元素的转动;这个度数值可以取正值也可以取负值,在这里,正值代表顺时针旋转,负值代表逆时针旋转,在这里通过指定的角度参数对元素指定一个2Droation(2D旋转),但是需要有trans-origin属性的定义。trans-origin定义的是旋转的基点,常见的写法为:transform:rotate(30deg);表示顺时针旋转30度;

scale([, ])
缩放元素对象,即指定对象的2D缩放。
第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值。
它使用一个或者两个正数和负数以及小数做为参数;两参数的含义:依次x轴缩放和y轴缩放,正数代表放大,负数代表缩小,当使用小数时,大于1代表放大,小于1代表缩小,当使用一个参数时表示x轴和y轴缩放相同;

scale()方法具有三种情况:
scale(x,y)使元素水平方向和垂直方向同时缩放(也就是x轴和y轴同时缩放);
scaleX(x)元素仅水平方向缩放(x轴缩放);
scaleY(y)元素仅垂直方向缩放(y轴缩放),这里要注意的是:这三个方法具有相同的缩放中心点和基数,其中心点就是元素的中心位置,缩放基数为1,值大于1元素放大,值小于1,元素则缩小。

scaleX():指定对象X轴的(水平方向)缩放
scaleY():指定对象Y轴的(垂直方向)缩放
skew( [, ])
倾斜元素对象,即指定对象斜切扭曲。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

skewX():指定对象X轴的(水平方向)扭曲
skewY():指定对象Y轴的(垂直方向)扭曲
matrix(,,,,,):
定义矩阵变换,即以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵。

下面通过一个简单的示例,让大家更好的理解css3 2D transform属性。
在本示例中,鼠标经过图像时div元素会放大并旋转,移开鼠标后又恢复原来的效果。

css样式代码如下:
div {
    margin:100px 0;
    width: 400px;
    height: 100px;
    background:url(images/bg1.jpg) center;
}
div:hover {
    /* 定义动画的状态 */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}
实际效果如下(将鼠标放上查看):

鲜花

握手

雷人

路过

鸡蛋

相关阅读

快讯
发布主题

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2017-9-25 08:38 , Processed in 0.077925 second(s), 26 queries .

返回顶部