在IE8和其他之间的CSS旋转中的始终原点？ [英] Consistent origin in CSS rotation between IE8 and everything else?

问题描述

可以使用 transform：rotate（XXdeg）; 对于普通浏览器使用变化（使用<$ c），在CSS中获取跨浏览器文本旋转$ c> -moz - ， -webkit - ， -ms - 旧版本）。然后，对于IE8和co（应该在IE6 +中工作，虽然IE6和IE7几乎不再担心：IE8仍然是一个问题），使用矩阵变换像这样：

  filter：progid：DXImageTransform.Microsoft.Matrix（
 M11 = [COSINE OF ANGLE]，
 M12 = [SINE OF ANGLE]，
 M21 = -1 x SINE OF ANGLE]，
 M22 = [COSINE OF ANGLE]，
 sizingMethod ='auto expand）; 
  

...例如。 filter：progid：DXImageTransform.Microsoft.Matrix（M11 = 0.76604444，M12 = 0.64278761，M21 = -0.64278761，M22 = 0.76604444，sizingMethod ='auto expand'）; p>

---

问题是，这两种方法有不同的变换起点，这意味着，相同的角度，旋转的元素的位置在浏览器之间变化，以及它如何变化取决于元素的角度和大小，使其固定不是一个简单的任务。

以下是演示此操作的现场演示： http://jsbin.com/edudof/2/

在非IE8中，可以像这样设置一个转换原点 - transform-origin：50％50 ％; （指定默认值）。我找不到任何等效的IE8的过滤器矩阵变换，我已经尝试设置非IE来源匹配IE来源（我已经阅读 - 虽然在随机博客文章 - 显然在左上角的元素，但 transform-origin：left left; is way off）。

我并不是那么想知道转换的起源是什么（虽然让一切都达到50％50％是理想的）。

---

我发现并尝试的另外两件事情：

• 一篇很长的文章描述了一种理论（未测试的）方法，可以用来编写在Javascript中执行此操作的东西。它需要手动定位以及两个额外的矩阵操纵层。 https://github.com/heygrady/transform / wiki / correcting-transform-origin-and-translate-in-ie


• javascript库 css3Sandpaper 。它有3个依赖和在我的所有测试 - 包括，只是运行包含的测试文件 - 它实际上不旋转任何东西（没有错误，它只是不做任何事情）

解决方案

这个结果不是很简单... Spudley的评论证实我的怀疑，值得注销手动输入的CSS作为一个丢失的原因。似乎没有简单的方法使IE旋转匹配其他浏览器在原点，没有非常复杂的矩阵计算旋转和翻译，还另一个计算多少偏移对象后旋转使用 top： left：等...

---

b $ b

通过 jquery.transform2d.js 似乎最好的选项 - 最少的代码，最少的非标准依赖=https://github.com/louisremi/jquery.transform.js> jquery.transform的louisremi分支 。

这里一个示例演示，其中旋转位置在IE7，IE8，IE9 +和Firefox，Chrome等之间几乎是像素完美的 - http：// jsbin.com/ejiqov/3 。

应用这样的旋转： $（'somejQuery'）。css（'transform'，'rotate（90degs）'）; 或动画旋转，例如： $（'somejQuery'）。animate（'transform'，'rotate（90degs）'）;

这个演示展示了我遇到的一个限制（触摸木头）与Jquery Transform插件的简单旋转（除了需要jQuery）：

• 删除任何位置（ top：， ：）。
  
  
  
  • 解决方法：将定位应用于包装元素，并旋转内部元素。这似乎很好（见上面的演示）
  
  

It's possible to get cross-browser text rotation in CSS using variations on transform:rotate(XXdeg); for normal browsers (inc. IE9+, using with -moz-, -webkit-, -ms- prefixes to cover older versions). Then, for IE8 and co (should work in IE6+, though IE6 and IE7 are almost no longer concerns: IE8 is still a concern), using matrix transforms like this:

filter: progid:DXImageTransform.Microsoft.Matrix(
  M11=[ COSINE OF ANGLE ],
  M12=[ SINE OF ANGLE ],
  M21=[ -1 x SINE OF ANGLE ], 
  M22=[ COSINE OF ANGLE ],
sizingMethod='auto expand); 

...e.g. filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.76604444, M12=0.64278761, M21=-0.64278761, M22=0.76604444,sizingMethod='auto expand');

---

The problem is, these two methods have different transform origins, which means that while they will have the same angles, the location of the rotated element varies between browsers, and how it varies depends on the angle and size of the element, making fixing it with positioning not a simple task.

Here's a live demo illustrating this: http://jsbin.com/edudof/2/

In non-IE8, it's possible to set a transform origin like this - transform-origin: 50% 50%; (specifies the default). I can't find any equivalent with IE8's filter matrix transform, and I've tried setting the non-IE origin to match the IE origin (which I've read - albeit on random blog articles - is apparently on the top left of the element, but transform-origin: top left; is way off).

I'm not so bothered about what the the transform origin is (although getting everything to 50% 50% would be ideal). The priority is having a consistent result across browsers.

---

Two more things I've found and tried:

• A very long article describing a theoretical (untested?) approach that could be taken to coding something that does this in Javascript. It requires manual positioning as well as two extra layers of matrix manipulation. https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie
• The javascript library css3Sandpaper. It has 3 dependencies and in all of my tests - including, just running the included test files - it doesn't actually rotate anything (no errors, it just doesn't do anything)

解决方案

Well this turned out not to be simple... Spudley's comment confirmed my suspicion that it's worth writing off manually entered CSS as a lost cause. It seems there's no simple way to make IE rotations match other browsers in origin without very complex matrix calculations to rotate and translate and also another calculation for how much to offset the object post-rotation using top: left: etc...

---

The option that seems to work best - least code, fewest non-standard dependencies - was jquery.transform2d.js via the louisremi branch of jquery.transform.

Here's an example demo where the rotation position is virtually pixel-perfect between IE7, IE8, IE9+ and Firefox, Chrome, etc - http://jsbin.com/ejiqov/3.

Apply rotations like this: $('somejQuery').css('transform','rotate(90degs)'); or for animated rotation, like this: $('somejQuery').animate('transform','rotate(90degs)');

That demo shows the one limitation I've come across so far (touch wood) with the Jquery Transform plugin for simple rotation (other than requiring jQuery):

• It erases any positioning (top:, left:) on the element that it rotates.
  • Workaround: Apply positioning to a wrapper element, and rotate the inner element. This seems to work fine (see demo above)

这篇关于在IE8和其他之间的CSS旋转中的始终原点？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！