I did some googling and here's my answer
.mirror {
display: block;
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: matrix(-1, 0, 0, 1, 0, 0);
}
<!--[if IE]>
<style>
.mirror {
filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
</style>
<![endif]-->
<div class="mirror">testing</div>
The only problem here is that the center of mirroring is not the center of the object, so maybe we need some javascript to move the object where we want it.
Your code is correct but there is an easier way to do this:
img.flip {
-moz-transform: scaleX(-1); /* Gecko */
-o-transform: scaleX(-1); /* Opera */
-webkit-transform: scaleX(-1); /* Webkit */
transform: scaleX(-1); /* Standard */
filter: FlipH; /* IE 6/7/8 */
}
I think this solves your centered mirroring issue.
As noted you will have to set the element to use a display of block, inline-block etc.
to mirror use transform: scaleX(-1); to flip use rotate(180deg);
Related
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:
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.
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).
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";
}
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("http://i.stack.imgur.com/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/
I have a set of divs that I'm animating in different ways. The first one swings/flips onto the stack using:
#-webkit-keyframes cardflip {
from {
-webkit-transform: perspective(2000) rotateY(90deg);
-webkit-transform-origin: 100% 0%;
}
to {
-webkit-transform: perspective(2000) rotateY(0deg);
-webkit-transform-origin: 100% 0%;
-webkit-transform: translate3d(0, 0, 0);
}
}
While the others are using transforms:
#cards .card:nth-child(2) { -webkit-transform: translate3d(0, 171px, 0); transform: translate3d(0, 183px, 0); }
#cards .card:nth-child(3) { -webkit-transform: translate3d(0, 342px, 0); transform: translate3d(0, 352px, 0); }
#cards .card:nth-child(4) { -webkit-transform: translate3d(0, 513px, 0); transform: translate3d(0, 521px, 0); }
#cards .card:nth-child(5) { -webkit-transform: translate3d(0, 684px, 0); transform: translate3d(0, 690px, 0); }
#cards .card:nth-child(6) { -webkit-transform: translate3d(0, 855px, 0); transform: translate3d(0, 859px, 0); }
#cards .card:nth-child(7) { -webkit-transform: translate3d(0, 1026px, 0); transform: translate3d(0, 1028px, 0); }
What I expect to happen is when I add a new div in the first position the other 'cards' slide down, and the first one flips into the top position. But it seems that the way I have it set up, the sliding animation doesn't happen when I add the new div on top of the stack, it just snaps to its new position. How can I fix this?
By the way, I'm only working in Chrome, hence the lack of non-webkit prefixes.
Fiddle.
You have to do it with a little bit of javascript, toggling a class instead. This is because the CSS selector of first child is immediately used and because transferring from an animation to a transition doesn't work the way you might think it might
var count = 0;
setInterval(function() {
$('#cards').prepend('<div class="card">testadd' + count++ + '</div>' );
setTimeout(function() {
document.getElementsByClassName("card")[0].className = "card first";
}, 10); // Fire just after it's added so it transitions
$('#cards .card:last').remove();
}, 5000);
CSS
#cards .first { -webkit-transform:translate3d(0,0,0) rotateY(0deg); }
#cards .card:nth-child(1) { z-index: 1000; }
Demo
(The count was for testing purposes)
I'm trying to rotate an arrow so it faces down, but not sure if this is possible
HTML
test <span id="rotate">»</span>
CSS
span#rotate{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
If you want to keep the element behaving like the inline span that it is, but also want to rotate it, then you will need to use display: inline-block; on it. This won't force it to a new line like display: block; naturally would.
Here is the correct code (jsFiddle: http://jsfiddle.net/joshnh/wZpP9/):
span#rotate{
display: inline-block;
*display: inline; /* Used to get IE 6 & 7 to behave */
zoom: 1; /* Used to get IE 6 & 7 to behave */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
You need the element to be a block element for rotate to work.
try adding:
display:block;
width:10px;
height:10px;
Is it possible to use CSS/CSS3 to mirror text?
Specifically, I have this scissors char “✂” (✂) that I'd like to display pointing left and not right.
You can use CSS transformations to achieve this. A horizontal flip would involve scaling the div like this:
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
And a vertical flip would involve scaling the div like this:
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
DEMO:
span{ display: inline-block; margin:1em; }
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }
<span class='flip_H'>Demo text ✂</span>
<span class='flip_V'>Demo text ✂</span>
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
The two parameters are X axis, and Y axis, -1 will be a mirror, but you can scale to any size you like to suit your needs. Upside down and backwards would be (-1, -1).
If you're interested in the best option available for cross browser support back in 2011, see my older answer.
Real mirror:
.mirror{
display: inline-block;
font-size: 30px;
-webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
-moz-transform: matrix(-1, 0, 0, 1, 0, 0);
-o-transform: matrix(-1, 0, 0, 1, 0, 0);
transform: matrix(-1, 0, 0, 1, 0, 0);
}
<span class='mirror'>Mirror Text<span>
You can user either
.your-class{
position:absolute;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
}
or
.your-class{
position:absolute;
transform: rotate(360deg) scaleX(-1);
}
Notice that setting position to absolute is very important! If you won't set it, you will need to set display: inline-block;
I cobbled together this solution by scouring the Internet including
Stack Overflow answers,
MSDN articles,
http://css-tricks.com/almanac/properties/t/transform/,
http://caniuse.com/#search=transform,
http://browserhacks.com/, and
http://www.useragentman.com/IETransformsTranslator/.
This solution seems to work in all browsers including IE6+, using scale(-1,1) (a proper mirror) and appropriate filter/-ms-filter properties when necessary (IE6-8):
/* Cross-browser mirroring of content. Note that CSS pre-processors
like Less cough on the media hack.
Microsoft recommends using BasicImage as a more efficent/faster form of
mirroring, instead of FlipH or some kind of Matrix scaling/transform.
#see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
#see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/
/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
and mirroring something that's already mirrored results in no net change! */
#media \0screen {
.mirror {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
}
}
.mirror {
/* IE6 and 7 via hack */
*filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
/* Standards browsers, including IE9+ */
-moz-transform: scale(-1,1);
-ms-transform: scale(-1,1);
-o-transform: scale(-1,1); /* Op 11.5 only */
-webkit-transform: scale(-1,1);
transform: scale(-1,1);
}
There's also the rotateY for a real mirror one:
transform: rotateY(180deg);
Which, perhaps, is even more clear and understandable.
EDIT: Doesn't seem to work on Opera though… sadly. But it works fine on Firefox. I guess it might required to implicitly say that we are doing some kind of translate3d perhaps? Or something like that.
For cross browser compatibility create this class
.mirror-icon:before {
-webkit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
transform: scale(-1, 1);
}
And add it to your icon class, i.e.
<i class="icon-search mirror-icon"></i>
to get a search icon with the handle on the left
you can use 'transform' to achieve this.
http://jsfiddle.net/aRcQ8/
css:
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
Just adding a working demo for horizontal and vertical mirror flip.
.horizontal-flip {
-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);
}
.vertical-flip {
-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);
}
<div class="horizontal-flip">
Hello, World
<input type="text">
</div>
<hr>
<div class="vertical-flip">
Hello, World
<input type="text">
</div>
That works fine with font icons like 's7 stroke icons' and 'font-awesome':
.mirror {
display: inline-block;
transform: scaleX(-1);
}
And then on target element:
<button>
<span class="s7-back mirror"></span>
<span>Next</span>
</button>
Just one more example how the character could be flipped. Add vendor prefixes if you need ones but for now all modern browsers support unprefixed transform property. The only exception is Opera if Opera Mini mode is enabled (~3% world users).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text rotation</title>
<style type="text/css" media="screen">
.scissors {
display: inline-block;
font-size: 50px;
color: red;
}
.original {
color: initial;
}
.flipped {
transform: rotateZ(180deg);
}
.upward {
transform: rotateZ(-90deg);
}
.downward {
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<ul>
<li>Original: <span class="scissors original">✂</span></li>
<li>Flipped: <span class="scissors flipped">✂</span></li>
<li>Upward: <span class="scissors upward">✂</span></li>
<li>Downward: <span class="scissors downward">✂</span></li>
</ul>
</body>
</html>
We can make pretty cool text effects using very little code, with css keyframes, and its alternate property (try removing alternate to see the difference):
span {
font-weight: 1000; font-size: 3.3em;
}
small {
display: inline-block;
font-size: 2.3em;
animation: 1s infinite alternate coolrotate
}
#keyframes coolrotate {
from {
transform: scale(1, 1) translate(-0.1em, 0)
}
to {
transform: scale(-1, 1) translate(0, 0)
}
}
<span>
<span>c</span>
<small>o</small>
<span>o</span>
<small>L</small>
<small>...</small>
</span>
this is what worked for me for <span class="navigation-pipe">></span>
display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);
just need display:inline-block or block to rotate. So basically first answer is good. But -180 didn't worked.
You could try box-reflect
box-reflect: 20px right;
see CSS property box-reflect compatibility? for more details
direction: rtl; is probably what you are looking for.
I want to rotate a single word of text by 90 degrees, with cross-browser (>= IE6, >= Firefox 2, any version of Chrome, Safari, or Opera) support. How can this be done?
Updated this answer with recent information (from CSS Tricks). Kudos to Matt and Douglas for pointing out the filter implementation.
.rotate {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* Should be unset in IE9+ I think. */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Old answer:
For FF 3.5 or Safari/Webkit 3.1, check out: -moz-transform (and -webkit-transform). IE has a Matrix filter(v5.5+), but I'm not certain how to use it. Opera has no transformation capabilities yet.
.rot-neg-90 {
/* rotate -90 deg, not sure if a negative number is supported so I used 270 */
-moz-transform: rotate(270deg);
-moz-transform-origin: 50% 50%;
-webkit-transform: rotate(270deg);
-webkit-transform-origin: 50% 50%;
/* IE support too convoluted for the time I've got on my hands... */
}
I am using the following code to write vertical text in a page.
Firefox 3.5+, webkit, opera 10.5+ and IE
.rot-neg-90 {
-moz-transform:rotate(-270deg);
-moz-transform-origin: bottom left;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
-o-transform: rotate(-270deg);
-o-transform-origin: bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
Another solution is to use an SVG text node which is supported by most browsers.
<svg width="50" height="300">
<text x="28" y="150" transform="rotate(-90, 28, 150)" style="text-anchor:middle; font-size:14px">This text is vertical</text>
</svg>
Demo: https://jsfiddle.net/bkymb5kr/
More on SVG text: http://tutorials.jenkov.com/svg/text-element.html
The CSS Writing Modes module introduces orthogonal flows with vertical text.
Just use the writing-mode property with the desired value.
span { margin: 20px; }
#vertical-lr { writing-mode: vertical-lr; }
#vertical-rl { writing-mode: vertical-rl; }
#sideways-lr { writing-mode: sideways-lr; }
#sideways-rl { writing-mode: sideways-rl; }
<span id="vertical-lr">
↑ (1) vertical-lr 至<br />
↑ (2) vertical-lr 至<br />
↑ (3) vertical-lr 至
</span>
<span id="vertical-rl">
↓ (1) vertical-rl 至<br />
↓ (2) vertical-rl 至<br />
↓ (3) vertical-rl 至
</span>
<span id="sideways-lr">
↓ (1) sideways-lr 至<br />
↓ (2) sideways-lr 至<br />
↓ (3) sideways-lr 至
</span>
<span id="sideways-rl">
↓ (1) sideways-rl 至<br />
↓ (2) sideways-rl 至<br />
↓ (3) sideways-rl 至
</span>
I adapted this from http://snook.ca/archives/html_and_css/css-text-rotation :
<style>
.Rotate-90
{
display: block;
position: absolute;
right: -5px;
top: 15px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
</style>
<!--[if IE]>
<style>
.Rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
right:-15px; top:5px;
}
</style>
<![endif]-->
I've had problems trying to do it in pure CSS - depending on the font it can look a bit rubbish. As an alternative you can use SVG/VML to do it. There are libraries that help make it cross browser with ease e.g. Raphael and ExtJS. In ExtJS4 the code looks like this:
var drawComp = Ext.create('Ext.draw.Component', {
renderTo: Ext.getBody(), //or whatever..
height: 100, width: 100 //ditto..
});
var text = Ext.create('Ext.draw.Component', {
type: "text",
text: "The text to draw",
rotate: {
x: 0, y: 0, degrees: 270
},
x: -50, y: 10 //or whatever to fit (you could calculate these)..
});
text.show(true);
This will work in IE6+ and all modern browsers, however, unfortunately I think you need at least FF3.0.
If you use Bootstrap 3, you can use one of it's mixins:
.rotate(degrees);
Example:
.rotate(-90deg);
My solution that would work on Chrome, Firefox, IE9, IE10 (Change the degrees as per your requirement):
.rotate-text {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
filter: none; /*Mandatory for IE9 to show the vertical text correctly*/
}
If CSS writing-mode: sideways-lr is what you prefer, and you happen to run into chromium/chrome based browser. You may try
{
writing-mode: vertical-rl;
transform: rotate(180deg);
}
so all modern browsers support it now.
reference: https://bugs.chromium.org/p/chromium/issues/detail?id=680331#c4