-webkit-transform 并适应级联（如何不覆盖以前的设置）

发布于 2024-10-21 05:02:39 字数 1266 浏览 2 评论 0原文

困境：

在我的 CSS 文件中，我有这样的：

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

在我的 jQuery 中，我稍后会这样做：

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

发生的情况（正如您可能猜到的那样）是通过 jQuery 内联设置 -webkit-transform 覆盖原始设置。通常这是正常的/预期的。但这里的问题是，我实际上设置了两种完全不同的样式（缩放和旋转），但由于 webkit 对这两种样式使用相同的属性名称，一种“覆盖”另一种。

有人能想出一种优雅的方式来处理这个问题吗？我能想到的最好的方法是提出一个 jQuery 函数，该函数将解析此特定样式并附加到逗号分隔的值列表或从中减去（类似于删除/添加类）。不过，如果要动态更新所有具有不同转换的嵌套元素，这仍然可能是一个挑战。（例如，我有一个包装器 DIV，我希望将缩放应用于（及其子项）。其中一个子项还需要进行旋转，但仍保留比例）。

更新：

经过进一步调查，这似乎不一定是 DOM 更新问题，而只是一个奇怪的 CSS 级联问题。

示例代码：

<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 将进行旋转，并且由于父级被缩放而在视觉上也按比例缩小。

原文

The dilemma:

In my CSS file, I have this:

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

In my jQuery, I then later do this:

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

What happens (as you can maybe guess) is that setting -webkit-transform inline via jQuery over-rides the original setting. Normally this is fine/expected. But the issue here is that I'm actually setting two entirely different styles (scale and rotatation) but due to how webkit uses the same property name for both, one 'over-rides' the other.

Can anyone think of an elegant way to handle this? The best I can think of is to come up with a jQuery function that will parse this particular style and append to/subtract from a comma delimited list of values (akin to remove/addClass). That still may be a challenge, though, if one is dynamically updating nested elements all with different transformations. (for instance, I have a wrapper DIV that I want scale to apply to (and its children). One of the children also need to do a rotation, but still preserve the scale).

UPDATE:

Upon further investigation, this appears to not necessarily be a DOM updating issue but rather just an odd CSS cascade issue.

Sample code:

<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>

I'm setting a scale style in the HEAD and then a rotate style inline. The inline rotate completely over-rides the scale since they are both '-webkit-transform' properties. Is that just the way it is?

UPDATE 2:

I think I have a workaround.

Turns out, I don't think this is an inheritance issue. My above example is over-writing the transform declaration, not adding to (inheritance).

The workaround would appear to add some extra markup. Apply the scale transform to a wrapper div, then apply the rotation transform to a child div. That child div will then have rotation AND also be scaled down visually due to the parent being scaled.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦毁影碎の 2024-10-28 05:02:39

是的，这就是 CSS 应该工作的方式，您将使用稍后/更具体的定义覆盖 -webkit-transform 属性。您可以尝试类似的操作：

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

或者您可以为已经具有转换集的 div 执行特殊情况。

Yes, that's the way CSS is supposed to work, you're overriding the -webkit-transform property with a later/more specific definition. You could try something like:

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

Or you could do a special case for the div that already has the transform set.

回复收藏 0 原文

浪菊怪哟 2024-10-28 05:02:39

这种行为是预期的，因为转换取决于转换的声明顺序。倾斜然后旋转与旋转然后倾斜是不同的（它们产生不同的形状），这对于级联声明来说不是好兆头。

不幸的是，在 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/

This behavior is sort of expected, because the transformation depends on the order in which the transformations are stated. It's different if you skew and then rotate than if you rotate and then skew (they produce different shapes) and this doesn't bode well with the cascading declarations.

Unfortunately, the facilites for getting around this in webkit are quite clunky, here is an example:

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));
});

You can see it in action here:
http://jsfiddle.net/VSqZt/

回复收藏 0 原文

執念 2024-10-28 05:02:39

根据应用程序的组织方式，您可以封装各种转换属性，然后使用一个转换规则将它们全部应用到您的元素。

例如：

您想要转换的 div 由视图或对象表示。为您想要控制的各种变换提供视图属性。根据您的示例，缩放和旋转。修改视图上的这些属性，然后更新/渲染元素以立即设置所有变换属性。

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();

Depending on how your application is organized, you can encapsulate the various transform properties and then apply them all to your element with one transform rule.

For example:

The div you wish to transform is represented by a view or object. Give the view properties for the various transforms you wish to control. From your example, scale and rotate. Modify these properties on the view then update/render the element to set all transform 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 原文

~没有更多了~