0
168
Visualizações¿Es posible doblar una fila de divs alrededor de un punto?
Este es el resultado que quiero hacer con divs ¿Cómo puedo lograr este resultado?
Editar: mi objetivo no era usar divs solo que no quería usar canvas. Pero no he pensado en los SVG, ¡así que gracias!
2 Respostas
Responde à pergunta0
Los elementos HTML no se adaptan realmente a este tipo de diseño, ya que son inherentemente rectangulares, mientras que sus segmentos tienen límites curvos.
Las transformaciones CSS solo le permitirán aplicar transformaciones afines que afectan a toda la forma por igual y no pueden crear este tipo de curvas.
SVG o Canvas se ajustarían mucho mejor a este tipo de dibujo dependiendo de lo que esté planeando hacer con él.
Si realmente necesita seguir la ruta del elemento HTML, entonces su mejor opción sería diseñar los divs y aplicarles máscaras de recorte para lograr las secciones curvas. Aquí hay un ejemplo básico de trazar divs a lo largo de una ruta circular:
const cx = 100; // Circle centre const cy = 100; const width = 40; // Width of line const height = 30; // Length of each segment const radius = 100; // Radius of circle const TwoPi = Math.PI * 2; // Compute circumference const circ = TwoPi * radius; const parent = document.documentElement; for (let i = 0; i < circ; i += height) { let div = document.createElement("div"); div.className = "pathSeg"; div.style.width = `${width}px`; div.style.height = `${height}px`; div.style.transform = `translate(${cx}px, ${cy}px) rotate(${(i / circ) * 360}deg) translate(${radius}px, 0)`; parent.appendChild(div); } .pathSeg { position: absolute; border: 1px solid black; }0
Aquí hay un ejemplo alternativo rápido y sucio usando arcos SVG
const cx = 100; // Circle centre const cy = 100; const width = 40; // Width of line const radius = 100; // Radius of circle const TwoPi = Math.PI * 2; // Compute circumference const circ = TwoPi * radius; const height = circ / 12; // Length of each segment const parent = document.getElementById("curve"); for (let i = 0; i < circ; i += height) { let seg = document.createElementNS("http://www.w3.org/2000/svg", "path"); let rs = (i / circ) * TwoPi; let re = ((i + height) / circ) * TwoPi; let ss = Math.sin(rs); let cs = Math.cos(rs); let se = Math.sin(re); let ce = Math.cos(re); // Build wedge path element seg.setAttribute("d", `M${(cs * radius) + cx},${(ss * radius) + cy}` + `A${radius},${radius} ${((re - rs) / Math.PI) * 180},0,1 ${(ce * radius) + cx},${(se * radius) + cy}` + `L${(ce * (radius - width)) + cx},${(se * (radius - width)) + cy}` + `A${radius - width},${radius - width} ${((re - rs) / Math.PI) * -180},0,0 ${(cs * (radius - width)) + cx},${(ss * (radius - width)) + cy}z` ); seg.setAttribute("class", "pathSeg"); parent.appendChild(seg); } .pathSeg { stroke: black; stroke-width: 3px; fill: white } .pathSeg:hover { fill: red } <svg width="200" height="200" viewBox="0 0 200 200"> <g id="curve"></g> </svg>