Is there a way to transpose a background image with CSS? (By "transpose" I mean that every pixel x,y in the source image ends up as pixel y,x in the background.)
Example
Source image:
Transposed image:
-
2An image describing "transposing" would be great to understand what you mean.web-tiki– web-tiki2014-06-02 11:48:17 +00:00Commented Jun 2, 2014 at 11:48
-
1From your explanation, you mean rotate it 90° ?Laurent S.– Laurent S.2014-06-02 11:50:03 +00:00Commented Jun 2, 2014 at 11:50
-
Yes it seems he wants to rotate it 90º "counter clockwise".João Pinho– João Pinho2014-06-02 11:52:25 +00:00Commented Jun 2, 2014 at 11:52
-
1@Bartdude flip it about 45 degree axis. I think it can be done by 90deg rotating and v/h flipping.Museful– Museful2014-06-02 11:58:23 +00:00Commented Jun 2, 2014 at 11:58
-
You can accomplish the same transformation by rotating 270 degree.João Pinho– João Pinho2014-06-02 12:01:10 +00:00Commented Jun 2, 2014 at 12:01
|
Show 1 more comment
4 Answers
The result image can in fact be achieved after scaling it around Y axis with factor of -1 and then applying rotate transform of -90deg. Try this:
div.transposed {
-webkit-transform-origin:left top;
-webkit-transform:scaleY(-1) rotate3d(0,0,1,-90deg);
}
Demo
Note that we have to rotate -90deg instead of 90deg because we use scaleY before, it will turn the positive direction of Y axis from top-to-bottom (downwards) to bottom-to-top (upwards). In fact scaleY(-1) is equal to rotateX(180deg), in 3D, that means the positive direction of Z axis will be inverted (instead of outwards from screen, it will be inwards to the screen), hence the rotating angle should be -90deg instead of 90deg as we might think.
Please test the demo on webkit-based browsers.
3 Comments
web-tiki
I was going for the same solution +1, but I was adding the background to a pseudo element so the content isn't affected : jsfiddle.net/webtiki/6MQ5d/1
King King
@web-tiki thanks, I've just thought it was a problem of transforming the background. Also thanks for the demo because I've noticed the difference in quality of the transformed image, it's because of using
transform-origin: 0 0, by default it is 50%, couldn't believe that it could affect the transformed image's quality.
Museful
@web-tiki and King King, thanks for your helpful demos. Just
transform:rotate3d(1,1,0,180deg); does it too!If by "transpose" you mean this, it's similar with "rotate 270 deg and reflect vertically" or "rotate 90 deg and reflect horizontally".
There you can find full solution to "rotate background" problem: http://thewebthought.blogspot.com/2013/04/css-rotate-background-images.html
After rotating you can reflect image by transform:scaleY(-1) or transform:scaleX(-1).
Comments
If I understand your question you want to rotate the image 90 degrees. pixels along x become pixels along y. In CSS3 this is a transform.
#myParentElement
{
-webkit-transform: rotate(90deg) scaleX(-1) /* updated to add flip */;
-ms-transform: rotate(90deg) scaleX(-1);
transform: rotate(90deg) scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
to do this to a background image you would need to apply the CSS transform to the parent of the element that has the background image. Apply another transform to the element so that its contents are not transformed.
#myParentElement
{
-webkit-transform: rotate(90deg) scaleX(-1);
-ms-transform: rotate(90deg) scaleX(-1);
transform: rotate(90deg) scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
#myElement
{
-webkit-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg);
filter: FlipH;
-ms-filter: "FlipH";
}
6 Comments
Museful
I think this would do the trick if it also flips about vertical/horizontal axis. Is it possible to add that operation?
web-tiki
I am not shure you need all those vendor prefixes, if you check caIuse : caniuse.com/transforms2d you will see that
-moz- isn't used since FF 16 and -o- since Opera 12. So I think the only ones you need are -webkit- and -ms-Museful
Still doesn't seem to work. I think the two transforms should appear in the same "css statement" (or whatever it's called) otherwise the second one overwrites the first one. Still, +1 because this was first and would be more browser independent if corrected. Thanks.
Wayne Smith
Attach background to parent element then and the child element restores the text or none background information back to normal.
Museful
Correct me if I'm wrong, but what I'm saying is that (for example)
-webkit-transform: scaleX(-1); seems to overwrite, rather than append to -webkit-transform: rotate(-90deg); but if you put it all into one statement -webkit-transform: rotate(-90deg) scaleX(-1); then it works. |
use this code to rotate the background 90 degrees on an element without affecting the element itself:
#myelement {
height: 164px;
overflow: hidden;
position: relative;
width: 79px;
}
#myelement:before {
background: url("https://i.sstatic.net/gMRiV.png") no-repeat;
content: "";
height: 79px;
left: -42px;
position: absolute;
top: 42px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
width: 164px;
z-index: -1;
}
and the html code:
<div id="myelement">test</div>
example: http://jsfiddle.net/fs4Dz/
