El siguiente código permite que se controlen individualmente, mi problema es que si ajusta uno, luego ajusta el otro, el valor del primero que ajustó se pierde (elimina) en lugar de agregarse (¿adjuntarse?) al css en línea.
function scaleXfont(e) { var scaleamount = document.getElementById("scaleXslider").value; document.getElementById("transscale").style.transform = "scaleX(" + scaleamount + ")"; currentcss(); } function scaleYfont(e) { var scaleamount = document.getElementById("scaleYslider").value; document.getElementById("transscale").style.transform = "scaleY(" + scaleamount + ")"; currentcss(); } function currentcss() { document.getElementById("currentcss").innerText = document.getElementById("transscale").style.cssText; } <div class="singlecontrol"> <span style="vertical-align: middle;">ScaleX</span> <input style="vertical-align: middle;" id="scaleXslider" oninput="scaleXfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" /> </div> <div class="singlecontrol" ><span style="vertical-align: middle;">ScaleY</span> <input style="vertical-align: middle;" id="scaleYslider" oninput="scaleYfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" /></div> <div id="cssinuse"> Current CSS = <br /> <span id="currentcss"></span> </div> <br /><br /> <div style="display:inline-block; width:100%; text-align:center;"> <div id="transscale">Stretch/Flip Me</div> </div>transform necesitará tener configuradas ambas escalas todo el tiempo.
Para evitar tener que obtener los valores actuales cada vez y luego hacer comparaciones/reemplazos de cadenas, este fragmento hace que JS establezca un par de variables CSS --x y --y con el estilo en el elemento de esta forma:
style="transform: scaleX(var(--x)) scaleY(var(--y));" function scaleXfont(e) { var scaleamount = document.getElementById("scaleXslider").value; document.getElementById("transscale").style.setProperty('--x', scaleamount); currentcss(); } function scaleYfont(e) { var scaleamount = document.getElementById("scaleYslider").value; document.getElementById("transscale").style.setProperty('--y', scaleamount); currentcss(); } function currentcss() { document.getElementById("currentcss").innerText = document.getElementById("transscale").style.cssText; } <div class="singlecontrol"> <span style="vertical-align: middle;">ScaleX</span> <input style="vertical-align: middle;" id="scaleXslider" oninput="scaleXfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" /> </div> <div class="singlecontrol"><span style="vertical-align: middle;">ScaleY</span> <input style="vertical-align: middle;" id="scaleYslider" oninput="scaleYfont(event)" type="range" value="0.0" min="-10" max="10" step="0.01" autocomplete="off" /></div> <div id="cssinuse"> Current CSS = <br /> <span id="currentcss"></span> </div> <br /><br /> <div style="display:inline-block; width:100%; text-align:center;"> <div id="transscale" style="transform: scaleX(var(--x)) scaleY(var(--y)); --x: 1; --y: 1;">Stretch/Flip Me</div> </div>Ahora resuelto tomando ambos valores del control deslizante y aplicándolos al mismo tiempo usando
var scaleXamount = document.getElementById("scaleXslider").value;
var scaleYamount = document.getElementById("scaleYslider").value;
style.transform = "scale(" + scaleXamount + ", " + scaleYamount + ")";
fue el comentario
transform necesitará tener configuradas ambas escalas todo el tiempo.
Eso me hizo pensar de esta manera, así que gracias.
Codigo de trabajo..
function scalefont(e) { var scaleXamount = document.getElementById("scaleXslider").value; var scaleYamount = document.getElementById("scaleYslider").value; document.getElementById("transscale").style.transform = "scale(" + scaleXamount + ", " + scaleYamount + ")"; currentcss(); } function currentcss() { document.getElementById("currentcss").innerText = document.getElementById("transscale").style.cssText; } <div class="singlecontrol"> <span style="vertical-align: middle;">ScaleX</span> <input style="vertical-align: middle;" id="scaleXslider" oninput="scalefont(event)" type="range" value="1.0" min="-10" max="10" step="0.001" autocomplete="off" /> </div> <div class="singlecontrol" ><span style="vertical-align: middle;">ScaleY</span> <input style="vertical-align: middle;" id="scaleYslider" oninput="scalefont(event)" type="range" value="1.0" min="-10" max="10" step="0.001" autocomplete="off" /></div> <div id="cssinuse"> Current CSS = <br /> <span id="currentcss"></span> </div> <br /><br /> <div style="display:inline-block; width:100%; text-align:center;"> <div id="transscale">Stretch/Flip Me</div> </div>