Databases
StackOverflow2013
Postsdbo
POConsistent origin in CSS rotation between IE8 and everything else?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POConsistent origin in CSS rotation between IE8 and everything else?
    primarykey
    data
    text
    <p>It's possible to get cross-browser text rotation in CSS using variations on <code>transform:rotate(XXdeg);</code> for normal browsers (inc. IE9+, using with <code>-moz-</code>, <code>-webkit-</code>, <code>-ms-</code> 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:</p> <pre><code>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); </code></pre> <p>...e.g. <code>filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.76604444, M12=0.64278761, M21=-0.64278761, M22=0.76604444,sizingMethod='auto expand');</code></p> <hr> <p><strong>The problem is</strong>, 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.</p> <p>Here's a live demo illustrating this: <strong><a href="http://jsbin.com/edudof/2/" rel="nofollow">http://jsbin.com/edudof/2/</a></strong></p> <p>In non-IE8, it's possible to set a transform origin like this - <code>transform-origin: 50% 50%;</code> (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 <code>transform-origin: top left;</code> is way off). </p> <p>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.</p> <hr> <p>Two more things I've found and tried:</p> <ul> <li>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. <a href="https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie" rel="nofollow">https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie</a></li> <li>The javascript library <a href="http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/" rel="nofollow">css3Sandpaper</a>. 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)</li> </ul>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuser568458
    1. USuser568458
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POConsistent origin in CSS rotation between IE8 and everything else?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COit would be interesting to see your cssSandpaper code, because that library does work quite well, and frankly is the only sane way to do rotations in a cross-browser (IE8) compatible way. It is possible to get it working in pure CSS, but it's a heck of a lot of work and tends to be quite brittle (ie if you want to change your layout, even only slightly, it generally ends up being a whole load *more* work).
      singulars
      1. POConsistent origin in CSS rotation between IE8 and everything else?
      1. USSpudley
    2. COThanks for the comment - the code that is failing to work for me is simply the `rotateTest.html` bundled with cssSandpaper.js v.1.5. I'm currently testing the **[louisremi branch of jquery.transform](https://github.com/louisremi/jquery.transform.js)** aka `jquery.transform2d.js` which looks simpler and has fewer dependencies - have you encountered this before? I don't see it mentioned as often as cssSandpaper
      singulars
      1. POConsistent origin in CSS rotation between IE8 and everything else?
      1. USuser568458
    3. CONo, I haven't tried jquery transform, but if it works, go for it. Anything that abstracts you away from having to write the IE filter code is good. The problem will be if you try to do it in pure CSS. Those matrix filters are an absolute bitch to work with.
      singulars
      1. POConsistent origin in CSS rotation between IE8 and everything else?
      1. USSpudley
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload