I'm trying to make a transform generator.
Users will constantly update this, but without success. Because when I use jquery element.css('transform', .... it changes it to singleton. But, I can't change other elements.
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)')
}
}
I'm just trying to ask a question and had to make a bunch of edits to post a question.
There may be things I forgot.
This is what you want?
you cant add multiple transform in an element so you have to create all the transformation in one string.
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>