【React】【CSS】特定の要素をユーザが拡縮する機能の作り方

　レスポンシブデザインを実現するためには、スマートフォン等の画面が小さい場合でもいい感じのデザインにする必要があります。よくある実現方法は画面によって適切な折り返しを作る方法ですが、どうにも大きくならざるをえず、折り返しもできず、素直に描画した場合画面からはみ出すことになる要素というものがあります。特定の要素をユーザが拡縮する機能によって全体の俯瞰とピンポイントな操作のしやすさを実現できます。
　特定の要素をユーザが拡縮する機能のデモが次です。

import "./styles.css";
import React from "react";

export default function App() {
  // 要素の倍率を保持
  const [zoom, setZoom] = React.useState(1);
  return (
    <div className="App">
      {/* 要素の倍率を操作 */}
      <div style={{ display: "flex" }}>
        <input
          type="range"
          min="0"
          max="10"
          step="0.01"
          value={zoom}
          onChange={(e) => setZoom(e.target.value)}
        />
        <span>倍率: {zoom}</span>
      </div>
      {/* 画面に対していい感じの幅の root と好きに拡縮する item の組み合わせ */}
      <div className="root">
        {/* transformOrigin: "top left",transform: `scale(${zoom})`, で左上を起点に拡縮可能 */}
        <div
          className="item"
          style={{
            transformOrigin: "top left",
            transform: `scale(${zoom})`,
            wordWrap: "anywhere"
          }}
        >
          {Array.from({ length: 200 }, (v, k) => k).map((a) => a)}
        </div>
      </div>
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}
.root {
  width: 100%;
  height: 320px;
  /* overflow: auto で子要素の拡縮に合わせて、自分を動かさず、スクロールの有無のみに専念 */
  overflow: auto;
  border: solid 1px;
}
.item {
  width: 100%;
  height: 100%;
  background: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.8),
      rgba(255, 0, 0, 0) 70.71%
    ),
    linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

　実装が容易なため React を用いていますが、これは主に CSS によるものであり、プレーンな JavaScript でもまあまあ簡単に書けるはずです。
　使っているのは CSS の transform の scale と transformOrigin です
　scale() – CSS： カスケーディングスタイルシート ｜ MDN
　transform-origin – CSS： カスケーディングスタイルシート ｜ MDN

transformOrigin: "top left",
transform: `scale(${zoom})`,

の指定によって左上を起点にして zoom の値によって拡縮する要素を作れます。