Css3中的变形神器——Transform

2015-08-12
  • 1220
  • 0
        Css3与Css最大的区别就是其增加了很多炫丽的效果,可以帮助站长们将页面更好的呈现。而Css3的炫丽的动画效果主要依靠三个属性来完成。变形(transform)、转换(transition)和动画(animation)。其中transform就是今天要说的重点了。
        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属性时才可以实现动画效果。