jQuery css ('transform') no devuelve ninguno

Estoy trabajando en una aplicación de diseño personalizado. Tiene cuatro imágenes que tienen propiedades de transformación asociadas debido a la posición de escala y arrastre.

Cuando intento acceder a esta propiedad utilizando jQuery, no devuelve ninguno para los primeros 3, pero el último muestra el valor, aunque todos ellos tienen un valor asociado.

En caso de que intente con 2 o 3 imágenes también, también devuelve el valor de solo el último, mientras que requiero para todos ellos.

Gracias de antemano por su ayuda en esta consulta, ya que estoy trabajando para resolver esto durante los últimos días pero no tuve éxito.

<script>
function generate preview(){
var design_type=$("#block_id").val();
if((design_type=="single")||(design_type=="double")||(design_type=="three")||(design_type=="four")){
                var image1=$('#design_block_'+design_type+' #droppable1 img').attr('id');
                var img_src1=$('#'+image1).attr('src');
                var org_img_src1=$('#'+image1+'_main_image').val();
                var current_angle1=$('#'+image1+'_angle').val();
                var current_effect1=$('#'+image1+'_effect').val();
                var image_transform1=$('#'+image1).css('transform');
                alert(image_transform1);
            }

            if((design_type=="double")||(design_type=="three")||(design_type=="four")){
                var image2=$('#design_block_'+design_type+' #droppable2 img').attr('id');
                var img_src2=$('#'+image2).attr('src');
                var org_img_src2=$('#'+image2+'_main_image').val();
                var current_angle2=$('#'+image2+'_angle').val();
                var current_effect2=$('#'+image2+'_effect').val();
                var image_transform2=$('#'+image2).css('transform');
                alert(image_transform2);
            }

            if((design_type=="three")||(design_type=="four")){
                var image3=$('#design_block_'+design_type+' #droppable3 img').attr('id');
                var img_src3=$('#'+image3).attr('src');
                var org_img_src3=$('#'+image3+'_main_image').val();
                var current_angle3=$('#'+image3+'_angle').val();
                var current_effect3=$('#'+image3+'_effect').val();
                var image_transform3=$('#'+image3).css('transform');
                alert(image_transform3);
            }

            if(design_type=="four"){
                var image4=$('#design_block_'+design_type+' #droppable4 img').attr('id');
                var img_src4=$('#'+image4).attr('src');
                var org_img_src4=$('#'+image4+'_main_image').val();
                var current_angle4=$('#'+image4+'_angle').val();
                var current_effect4=$('#'+image4+'_effect').val();
                var image_transform4=$('#'+image4).css('transform');
                alert(image_transform4);
            }
}
</script>
<body>
<div id="design_block_four" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden; display: inline-block; z-index: 90;">
<div style="width:49%; height:100%; float:left; border-right:2px solid #000000;position:relative;">
<div style="width:100%; height:49%; float:left; border-bottom:2px solid #000000;position:relative;">
<div style="overflow: hidden;" id="droppable1" class="drop ui-droppable"></div>
</div>
<div style="width:100%; height:50%; float:left;position:relative;">
<div style="overflow: hidden;" id="droppable2" class="drop ui-droppable"></div>
</div></div>
<div style="width:50%; height:100%; float:right;position:relative;">
<div style="width:100%; height:49%; float:left; border-bottom:2px solid #000000;position:relative;">
<div style="overflow: hidden;" id="droppable3" class="drop ui-droppable"></div>
</div>
<div style="width:100%; height:50%; float:left;position:relative;"><div style="overflow: hidden;" id="droppable4" class="drop ui-droppable"></div></div></div>
</div></body>

El código anterior tiene 4 etiquetas img y todas tienen una propiedad de transformación diferente, pero el código de JavaScript devuelve vale solo el último y el resto se devuelve como ninguno.

Saludos Anoop

0
Por favor, proporciónenos algunos ejemplos de códigos relevantes.
agregado el autor Pankucins, fuente

2 Respuestas

Prueba este:

getComputedStyle($('[element selector]'))['-webkit-transform'];
0
agregado
también da el mismo problema
agregado el autor Anoop, fuente
Si comprueba el código de muestra anterior en mi publicación original, encontrará que la propiedad de transformación tiene valor.
agregado el autor Anoop, fuente
No lo he intentado, pero no es que no esté obteniendo valor, pero supongo que hay elementos con transformación, entonces estoy obteniendo valor para el último y el primero no viene.
agregado el autor Anoop, fuente
tal vez porque realmente no hay ningún valor para la propiedad transformar?
agregado el autor Arnelle Balane, fuente
¿Has intentado agregar los prefijos de proveedor para la propiedad de transformación, como en -webkit-transform: matrix (...) ?
agregado el autor Arnelle Balane, fuente

En mi caso, es porque se ve como un atributo de estilo, por lo que $ (selector) .attr ('estilo') devolverá la cadena de estilo completa. Todavía estoy tratando de descubrir por qué esto no se considera estilo computado. D3.js tiene el mismo comportamiento.

0
agregado