明星八卦
css3旋转((原创)css3旋转、缩放、倾斜)

(原创)css3旋转、缩放、倾斜nerror="javascript:errorimg.call(this);">

<script type='text/javascript' src='js/jquery-waypoints-2.0.3.js'></script> <!--滚动视差-->

  • 共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。

    用法:transform: scale(0.5) 或者 transform: scale(0.5, 2);

    一个参数时:表示水平和垂直同时缩放该倍率

  • 三.倾斜 skew

    参数表示倾斜角度,单位deg

    • 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。

    用法:transform: translate(45px) 或者 transform: translate(45px, 150px);

    一个参数时:表示水平方向的移动距离;

  • 五.基准点 transform-origin

    用法:transform-origin: 10px 10px;

    两个参数除了可以设置为具体的像素值,其中第一个参数可以指定为left、center、right,第二个参数可以指定为top、center、bottom。

    上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法,这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

    这四种变形方法顺序可以随意,但不同的顺序导致变形结果不同,原因是变形的顺序是从左到右依次进行,这个用法中的执行顺序为1.rotate 2.scalse 3.skew 4.translate

    加微信公众号:qietuwang (限做前端的人)


  • 顶一下()     踩一下()

    热门推荐

    发表评论
    0评