transform三大属性



rotate



、



scale



、



translate



、

transform:

作用: 动画效果

优点: 执行速度 很更快 (模拟使用 GPU渲染)

const [isbool, setIsbool] = useState(false)

<div styleName={cs('tranform', {tranform2: isbool})}>
    tranform
</div>
<div styleName={cs('tranform-xy', {'tranform-xy2': isbool})}>
    tranform
</div>

//初始样式
.tranform, .tranform-xy {
  width: 100px;
  height: 100px;
  background: rgb(241, 241, 40);
  transform: translateX(0);
}
//第一个图形
.tranform2 {
  transform: translateX(500px);
}
//第二个图形
.tranform-xy {
  background: #F99;
}
.tranform-xy2 {
  // x, y 轴 都移动
  transform: translate(100px, 50px);
}

rotate：

rotate(angle)定义2D旋转

rotateX(angle)

x 轴 横向移动

rotateY(angle)

y 轴 竖向移动

rotateZ(angle)

双向移动

rotate3d(angle)定义3d旋转

rotate3d(1, 0, 1, -180deg);顺时针旋转消失

const [r, setR] = useState(false)

<div styleName={cs('rotate', {'rotate2': r})}>
    rotate
</div>

.rotate {
  width: 100px;
  height: 100px;
  background: rgb(64, 193, 233);
}
.rotate2 {
  rotate: 45deg;
}

scale：

CSS3 transform-origin属性设置元素旋转起始位置

scale(数值)定义倍数缩放，>1放大，<1缩小

scaleX()通过x轴定义，仅水平方向缩放

scaleY()通过y轴定义，仅垂直方向缩放

scaleZ()通过z轴定义，定义3d缩放

const [s, setS] = useState(false)

<div styleName={cs('scale', {'scale2': s})}>
    scale
</div>

.scale {
  width: 100px;
  height: 100px;
  background: rgb(77, 236, 90);
}
.scale2 {
  // 缩小 宽 或者 高
  transform: scale(1, 0.5);
  // 宽高 都缩小
  // transform: scale(0.5);
}

translate:

translateX(30px): x 轴 横向移动

translat0px): y 轴 竖向移动

translate(x, y): 双向移动

translate3d(x, y, z): 3个轴的方向移动 (伪GPU渲染) z 轴永远设置成 0

缩放：

给 2: 放大2倍

给 0.5: 缩小一倍

scale(比例)

scale(x, y)

旋转 rotate

rotate(角度): 例如 rotate(45deg)