transfrom 属性向元素应用 2D 或 3D 转换。 可对元素进行位移、旋转、缩放、倾斜

translate 位移 translate(x,y) translateX() translateY() translateZ() translate3D(x,y,z)以中心为基点按照设定的`x`,`y`参数值,对元素进行进行平移。

rotate 旋转 同上 rotate3D(x,y,z,角度) eg:rotateX(45deg)以中心为基点，`deg`表示旋转的角度，为负数时表示逆时针旋转。

scale 缩放 同 translate缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。

skew 斜切 skew(x,y) skewX() skewY()以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。

小小展示

import React, { useState, useEffect, useRef } from 'react';
import cs from 'classnames';
import './styles.less';
import { history } from 'umi';

// 提交 修改 都是 post
export default function Detail(props) {
  const [isbool, setIsbool] = useState(false);
  const [scalebool, setScalebool] = useState(false);
  const [scalebool1, setScalebool1] = useState(false);

  const [scalebool2, setScalebool2] = useState(false);
  // 移动
  const onClick = () => {
    setIsbool(true);
  };
  // 缩小
  const onClick1 = () => {
    setScalebool(true);
  };
  // 放大
  const onClick2 = () => {
    setScalebool1(true);
  };

  // 旋转
  const onClick3 = () => {
    setScalebool2(true);
  };
  return (
    <div>
      <div styleName={cs('tranform', { tranform2: isbool })}>tranform</div>
      <div styleName={cs('tranform-y', { 'tranform-y2': isbool })}>
        tranform
      </div>
      {/* 缩小 */}
      <div styleName={cs('scale', { scale1: scalebool })}>scale</div>
      {/* 放大*/}
      <div styleName={cs('scale2', { scale3: scalebool1 })}>scale</div>
      {/* 旋转*/}
      <div styleName={cs('scale4', { scale5: scalebool2 })}>scale</div>
      <button onClick={onClick}>移动</button>
      <button onClick={onClick1}>缩小</button>
      <button onClick={onClick2}>放大</button>
      <button onClick={onClick3}>旋转</button>
    </div>
  );
}

css

.tranform{
  width: 100px;
  height: 100px;
  background: yellow;
}
.tranform2{
  transform: translateX(500px);
}
.tranform-y{
  width: 100px;
  height: 100px;
  background: red;
}
.tranform-y2{
 transform: translate(100px,50px);
}
.scale{
  width: 100px;
  height: 100px;
  background: green;
}
.scale1{
transform: scale(0.5,0.3);
}
.scale2{
  width: 100px;
  height: 100px;
  background: rgba(106, 4, 106, 0.209);
}
.scale3{
transform: scale(2);
}
.scale4{
  width: 100px;
  height: 100px;
  background: rgba(2, 12, 151, 0.209);
}
.scale5{
  rotate: 45deg;
}