tranform 用法

<button onClick={onClick}>退出</button>
      <div className={cs('tranform', { tranform2: isbool })}>tranform</div>
      <div className={cs('tranform-xy', { 'tranform-xy2: isbool': isbool })}>
        tranform
      </div>
      <div className={cs('scale', { scale2: s })}>scale</div>
      <div className={cs('rotate', { rotate2: r })}>rotate</div>
      <div onClick={onClick2}>x 移动500</div>
      <div onClick={onScale}>缩小一倍</div>
      <div onClick={onRotate}>旋转45度</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);
}
.scale {
  width: 100px;
  height: 100px;
  background: rgb(77, 236, 90);
}
.scale2 {
  // 缩小 宽 或者 高
  transform: scale(1, 0.5);
  // 宽高 都缩小
  // transform: scale(0.5);
}
.rotate {
  width: 100px;
  height: 100px;
  background: rgb(64, 193, 233);
}
.rotate2 {
  rotate: 45deg;
}