Geek asks and answers

-webkit-transform and cascade placement (how not to overload the previous settings)

Dilemma:

In my CSS file, I have the following:

div {
    -webkit-transform: scale(0.5);
}

In my jQuery, I will then do the following:

$('div).css('-webkit-transform','rotate(3deg)')

What happens (as you can guess) is that the -webkit-transform inline parameter via jQuery overloads the original setting. This is usually normal / expected. But the problem here is that I actually set two completely different styles (scale and rotation), but because webkit uses the same property name for both, one overrides the other.

Can anyone think of an elegant way to handle this? The best I can come up with is to come up with a jQuery function that will parse this particular style and add / subtract from the comma-separated list of values ​​(akin to remove / addClass). However, this can be a problem if dynamically updating nested elements with different transformations. (for example, I have a DIV wrapper that I want to apply to the scale (and its children). One of the children also needs to make a rotation, but keep the scale).

UPDATE:

Upon further investigation, this, apparently, is not necessarily a DOM update issue, but rather an odd cascading CSS issue.

Code example:

<html>
<head>
    <style>
      #parentSpan {
        -webkit-transform: scale(.25);
      }
    </style>
</head>
<body>
    <span id="parentSpan" style="
      display: block;
      border: 1px solid orange;
      width: 600px;
      -webkit-transform: rotate(5deg);
      ">
    hello
    </span>

HEAD, . , "-webkit-transform". ?

2:

, .

, , . , ().

, , . div, div. div - .

+3
3

, CSS , -webkit-transform / . - :

$('div').css('-webkit-transform', $('div').css('-webkit-transform') + ' rotate(3deg)')

div, .

+2

, , . , , , ( ), .

, webkit , :

function getMatrix() {
  var element = document.getElementById("whatever");
  var transform = window.getComputedStyle(element).webkitTransform;
  return matrix = new WebKitCSSMatrix(transform);
}


$("#smaller").click(function(){
   getMatrix();
  $("#whatever").css("webkit-transform", matrix.scale(0.8));
});

$("#bigger").click(function(){
   getMatrix();
  $("#whatever").css("webkit-transform", matrix.scale(1.2));
});

$("#rotate").click(function(){
   getMatrix();
  $("#whatever").css("webkit-transform", matrix.rotate(5));
});

$("#invert").click(function(){
   getMatrix();
  $("#whatever").css("webkit-transform", matrix.inverse(1));
});

: http://jsfiddle.net/VSqZt/

0

Depending on how your application is organized, you can encapsulate various transformation properties, and then apply them all to an element with a single transformation rule.

For instance:

The div you want to convert is represented by a view or object. Give view properties for the various transformations that you want to control. From your example, scale and rotate. Change these properties in the view, then update / render the element to set all the transformation properties at once.

var view = {
    scale: 1.0,
    rotate: "0deg",
    render: function() {
        $("#some-element").css("-webkit-transform", "scale("+this.scale+") rotate("+this.rotate+")");
    }
}

view.scale = 2.0;
view.rotate = "45deg";

view.render();
0
source

More articles:


All Articles