• 2D动画效果transform


    transform:2D转换
    1,移动:translate
      transform:translate(x,y); //translate(x,y) 定义 2D 转换。
        translateX(x) //定义转换,只是用 X 轴的值。
        translateY(y) //定义转换,只是用 Y 轴的值。
      transform:translate(x,y,z); // translate3d(x,y,z) 定义 3D 转换。
        translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
    2,旋转:rotate(360deg); //deg为旋转的角度;
      配合transition过渡属性用
      transform:rotate(360deg); //值可以为负值,代表逆时针旋转;
      rotate(angle) 定义 2D 旋转,在参数中规定角度。
    3,缩放:scale //正数放大,负数缩小,值可以为小数;
      transform: scale(x,y); //x,y不跟单位,1就是一倍,倍数放大缩小;
      scale(2) //整个放大两倍;
    4,transition:过度属性 过度时间 曲线 延迟;
      transition: height 1s,width 2s;
      transition:all 1s; //all代表全部属性;
    5,transform-origin:旋转中心点
      transform-origin: left right bottom right center; //也可以是像素px;

    时间如白驹过隙,忽然而已,且行且珍惜......
  • 相关阅读:
    活动的生命周期
    活动
    开始编程前的准备工作
    数组转List
    Word根据模板生成数据
    Excel根据模板生成数据
    php取年份区间
    世界 国家 省份 sql
    相册处理,php中获取一组前缀相同的元素值
    mysql添加字段
  • 原文地址:https://www.cnblogs.com/UnfetteredMan/p/13479392.html
Copyright © 2020-2023  润新知