让企业赢在全网营销时代
当前位置: 主页 > 建站知识 > 网页设计 >
联系我们
电话咨询:15066004201
E-mail:727661179@qq.com
地址: 山东省东营市西城区

浅谈CSS3中的—Transform如何合理使用

作者:admin 点击量:次 2017-03-09

Css3与Css最大的区别就是其增加了很多炫丽的效果,可以帮助站长们将页面更好的呈现。而Css3的炫丽的动画效果主要依靠三个属性来完成。变形(transform)、转换(transition)和动画(animation)。其中transform就是今天要说的重点了。

css3

Transform的变形功能主要分为:旋转rotate、扭曲skew、缩放scale和移动translate。下面一一说明:

Rotate(旋转):

Rotate方法可以实现指定版块进行任意角度的旋转,使用方法:transform:rotate(角度); 如:transform:rotate(90deg)就表示旋转90度。

Skew(扭曲)

Skew方法表示:将形状按照x轴与y轴进行指定角度的倾斜或扭曲。

使用方法:transform:skew(x轴倾斜角度,Y轴倾斜角度)

示例:transform:skew(30deg,50deg) X轴与Y轴同时扭曲,X轴扭曲30度,Y轴扭曲50度。

Scale(缩放)

Scale方法表示:将版块按等比例放大缩小。

使用方法:transform:scale(放大倍数);

示例:transform:scale(2.0)将版块放大2倍;

注意:放大倍数小数点后保留一位。如放大2倍,参数必须为2.0

Translate(移动)

Translate方法表示:将版块向指定方向移动;

使用方法:transform:translate(左右移动的距离,上下移动的距离)

示例:transform:translate(200px,100px) 将版块向右移动200px,然后向上移动100px。

注意:参数默认是向右和向上2个,如果向左或者向下移动,将参数改为负数即可。如果x轴或者y轴不想移动,标为0即可。

以上所述的4种变形方法如果单独使用只能实现静态变形的效果,需要在配合transition属性时才可以实现动画效果。