• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > HTML5与CSS3.0 > CSS3变形:通过transform2D实现2D变形

    CSS3变形:通过transform2D实现2D变形

    作者: 分类:HTML5与CSS3.0 点击: 78 次
    wordpress CMS主题:ssmay主题

      用过ps的童鞋几乎都知道ctrl+T自由变换工具,我觉得CSS3 transform就汲取了ps变形的精华,好好地继承了这三板斧精神。

      一、transform变形

      实现对元素的缩放、移动、旋转、倾斜,分别对应以下几个方法。

      注意:变形只能针对块状对象,行内元素需要变成块状对象才能实现变形效果。

      1、scale()  缩放

      2、translate()  移动

      3、rotate()  旋转

      4、skew()  倾斜

      5、matrix()  把所有 2D 转换方法组合在一起的矩阵。

      1、scale()缩放

      默认以元素的中心点进行大小的缩放。

      scale(1.5)表示等比例缩放到原始大小的150%。如果只有一个参数值,说明x、y的缩放是一样的,以x轴为准。

      CSS3变形:通过transform2D实现2D变形

      scale(2,4)表示x轴缩放到200%,y轴缩放到400%。

      可以单独使用scaleX(2),表示只有x轴缩放到原始的200%。

      CSS3变形:通过transform2D实现2D变形

      scaleY(2),y轴缩放到原始的200%。

      CSS3变形:通过transform2D实现2D变形

      默认是以元素的中心点进行缩放,可以利用transform-origin属性修改中心点,定位和background-position的用法一样。

      2、translate()移动

      这个方法就是移动元素的x、y坐标值。相对于left、top等定位值有不同的参考物,translate的位移参考物只有一个,那就是它自己原始的位置。默认的基点为中心点。可以通过transform-origin改变基点的位置。

      translateX(100px),水平往右移动100px,如果为负值,则往左移动。

      CSS3变形:通过transform2D实现2D变形

      translateY(20px),纵向往下移动20px,如果为负值,往上移动。

      CSS3变形:通过transform2D实现2D变形

      translate(100px,20px),水平移动100px,纵向移动20px。

      CSS3变形:通过transform2D实现2D变形

      translate(200px),如果只有一个参数的时候,第二个参数默认为0。此时只移动x轴的距离为200px。

      注意:对象设置了变形后,默认文档流层级比普通对象的层级高,如果都做了变形处理,则依然按照文档流的顺序处理层级。

      3、rotate()旋转

      默认以对象的中心点顺时针或者逆时针旋转。比如rotate(45deg),顺时针旋转45度。单位是deg度。

      CSS3变形:通过transform2D实现2D变形

      可以通过transform-origin改变旋转的中心点。默认是center。

      比如:transform-origin:right center/50%  20%/200px 400px等等值,和background-position的定位一样一样的。基于旋转的对象盒模型定位。

      4、skew()倾斜

      以对象中心点沿着X轴、Y轴倾斜多少度数。

      skewX(30deg),x轴水平方向扭曲变形30度。

      CSS3变形:通过transform2D实现2D变形

      skewY(10deg),y轴垂直方向扭曲变形10度。

      CSS3变形:通过transform2D实现2D变形

      skew(30deg),如果第二个参数省略,表示y轴为0,没有倾斜。

      skew(30deg,10deg),x轴和y轴同时发生扭曲。

      CSS3变形:通过transform2D实现2D变形

      5、多个变形一起执行

      多种变形的时候,按照“后写先执行”的规则。后面的先执行,最前面的变形最后执行,后执行的会用上先执行的值。而且还要注意中心点是否发生了变化。所以先后顺序不一样的时候,效果也不一样。

      多个变形之间用空格隔开。

      比如:

      transform:scale(.5) translate(200px,0),先移动200px,再缩放为50%,其实最后移动的位置也会变成一半,只移动了100px,最后的停留状态是scale(0.5)。

      transform:translate(200px,0) scale(0.5),先缩放为50%,再移动200px,最后移动的是200px,停留的状态也是最后的200px的移动。

      后写的先执行。再把值传递给前面。

      如果再增加一些旋转变形,还涉及到中心点的问题。

      对第二个动画做了一个图解,可以看出translate移动并没有改变对象的中心点,所以旋转的时候,依然是按照对象的默认原始中心点来旋转的。

      多个变形动画的图解2.jpg

      下面这个距离能算出来了吗?

      多个变形动画的图解1.jpg



      QQ二维码

    文章作者:zhangxuan
    本文地址:http://wanlimm.com/77201809106870.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.