Estoy tratando de hacer un generador de transformación.
Los usuarios actualizarán esto constantemente, pero sin éxito. Porque cuando uso jquery element.css('transform', .... lo cambia a singleton. Pero no puedo cambiar otros elementos.
HTML
<p>ROTATE X</p> <input class="inputrange" name="transformRx" type="range"> <p>ROTATE Y</p> <input class="inputrange" name="transformRy" type="range"> <p>SKEW Y</p> <input class="inputrange" name="transformSy" type="range"> <p>SKEW X</p> <input class="inputrange" name="transformSx" type="range"> <!--2--> <p>ROTATE X</p> <input class="inputrange2" name="transformRx" type="range"> <p>ROTATE Y</p> <input class="inputrange2" name="transformRy" type="range"> <p>SKEW Y</p> <input class="inputrange2" name="transformSy" type="range"> <p>SKEW X</p> <input class="inputrange2" name="transformSx" type="range"> <div id="inputrange" class="ht" name="draggable"> <div id="inner-inputrange"></div> </div> <div id="inputrange2" class="ht" name="draggable"> <div id="inner-inputrange2"></div> </div>JS
$('input[type="range"]').on('input change', function(){ switch (this.name){ case "transformRx": calculateMatrix(this.className, this.value, null, null, null) break; case "transformRy": calculateMatrix(this.className, null, this.value, null, null) break; case "transformSy": calculateMatrix(this.className, null, null, this.value, null) break; case "transformSx": calculateMatrix(this.className, null, null, null, this.value) break; }}) function calculateMatrix(elName, rotateX, rotateY, skewY, skewX) { if (elName != "undefined") { $('#'+elName).css('transform', ''rotateX('+rotateX+'deg) rotateY('+rotateY+'deg) skewX('+skewX+'deg) skewY('+skewY+'deg)') } }Solo estoy tratando de hacer una pregunta y tuve que hacer un montón de ediciones para publicar una pregunta.
Puede haber cosas que olvidé.
¿Esto es lo que quieres?
no puede agregar múltiples transformaciones en un elemento, por lo que debe crear todas las transformaciones en una cadena.
var transform = []; function updateCss(This) { // console.log(This); const type = $(This).data("type"); const end = $(This).data("end"); const value = $(This).val(); let transform_string = ""; transform[type] = `${type}(${value}${end})`; Object.keys(transform).forEach((item, index, array) => { transform_string += transform[item]; }); $('#inputrange').css("transform",transform_string); } #inputrange{ width: 10rem; height: 5rem; background: blue; } #inner-inputrange{ width: 5rem; height: 100%; background: purple; } #inputrange2{ margin-top: 5rem; width: 10rem; height: 5rem; background: blue; } #inner-inputrange2{ width: 5rem; height: 100%; background: purple; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>ROTATE X</p> <input class="inputrange"data-type="rotateX" data-end="deg" onchange="updateCss(this)" name="transformRx" type="range"> <p>ROTATE Y</p> <input class="inputrange" data-type="rotateY" name="rotateY" data-end="deg" onchange="updateCss(this)" type="range"> <p>SKEW Y</p> <input class="inputrange" data-type="skewY" data-end="deg" onchange="updateCss(this)" name="transformSy" type="range"> <p>SKEW X</p> <input class="inputrange" name="transformSx" data-type="skewX" data-end="deg" onchange="updateCss(this)" type="range"> <div id="inputrange" class="ht" name="draggable"> <div id="inner-inputrange"></div> </div>