zoukankan      html  css  js  c++  java
  • CSS3-transform,2D动画实例

    2D转换

      对元素进行移动。缩放。转动。拉长 或 拉伸
      
        全部都需要加前缀。

    Transform-2D转换方法:rotate()旋转、scale()缩放、skew()扭曲/倾斜、translate()位移、matrix()矩形变形、

      rotate(angle):通过角度参数指定一个2D旋转,在参数中规定角度。

      skew(x-angle,y-angle):倾斜,沿着X和Y轴。
        skewX(angle):沿着X轴。
        skewY(angle):沿着Y轴。

      scale(x,y):转换,改变元素的宽高。
        scaleX(n):改变元素宽。
        scaleY(n):改变元素高。

      translate(x,y):转换,沿着X和Y轴移动元素。
        translateX(n):沿着X轴移动元素。
        translateY(n):沿着Y轴移动元素。

      matrix(n,n,n,n,n,n):转换,使用6个值的矩形,较为复杂,不常用。

     

    DEMO

  • 相关阅读:
    jquery 实现 返回顶部
    js 10秒倒计时 功能
    2019.6.10 工作日志
    2019.4.25 工作日志
    2019.4.22 工作日志
    2019.4.13 工作日志
    2019.3.12 工作日志
    2019.1.22 工作日志
    2019.1.18 工作日志
    2019.1.14 工作日志
  • 原文地址:https://www.cnblogs.com/slowsoul/p/3139098.html
Copyright © 2011-2022 走看看