Can someone please clarify what the shorthand for translate is.
-webkit-transform: translateY(-50%) ;
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
How do I condense this?
You just put them all in a line. (not unlike border)
border: 1px solid blue;
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);
hopefully you can use autoprefixer to spit out the -prefixes-
Toss it in a CodePen and turn on autoprefixer to check it out - then look at the compiled styles.
I'm trying to create what is essentially a rack using CSS. Here is a demo pen of what I have right now.
http://codepen.io/aherrick/pen/BzrnL
Everything is working as I want it to except for the following. Take a look at the following image as a representation. When the inner rectangles get rendered, they are essentially flipped on the "left" side. This is due to the first rectangle getting rendered at 0,0
Any thoughts on how to combat this while still maintaining a generic method to render the rectangles?
If I understand you correctly, you want to have the "a" and "b" boxes in the left to be swapped.
One way to get that would be to change this
.rack .left {
-webkit-transform: rotateY(90deg) translateZ( -296px );
-moz-transform: rotateY(90deg) translateZ( -296px );
-o-transform: rotateY(90deg) translateZ( -296px );
transform: rotateY(90deg) translateZ( -296px );
}
to this
.rack .left {
-webkit-transform: rotateY(-90deg) translateZ( 296px );
-moz-transform: rotateY(-90deg) translateZ( 296px );
-o-transform: rotateY(-90deg) translateZ( 296px );
transform: rotateY(-90deg) translateZ( 296px );
}
(rotate the oposite way)
I need to rotate a text vertically in my HTML5-application.
This works in all browsers except IE9 and lower (couldn't test it in IE10 yet):
.badgeWrapper > h3{
-webkit-transform: rotate(-90deg) translate(-100%, 0%);
-webkit-transform-origin: 0 0 0;
-moz-transform: rotate(-90deg) translate(-100%, 0%);
-moz-transform-origin: 0 0 0;
-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0 0;
-o-transform: rotate(-90deg) translate(-100%, 0%);
-o-transform-origin: 0 0 0;
transform: rotate(-90deg) translate(-100%, 0%);
transform-origin: 0 0 0;
width: 140px;
position: absolute;
}
In IE9 (no Quirksmode), the element is rotated but positioned wrong, it's displayed way too low. What am I doing wrong? The elements parent is position:relative btw.
Thanks!
SOLUTION
Sorry to solve my own question, but I had a mistake in giving transform-origin 3 values (which makes it a 3d-transform I suppose) which is not supported by IE9. Removing the last "0" solved the problem.
As supposed by #Spudley I post my solution here, so it maybe will help others with the same problem:
You must not use 3 values for IE <= 9 as those versions of IE do only support 2D-transformations, 3 values however seem to tell the browser it's an (unsupported) 3D-transform.
So this is wrong:
-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0 0;
and this is right and working:
-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0;
Hope it helps.
I have an animation that up till a few weeks ago worked in Google Chrome. I changed nothing and all of a sudden it stopped working. I've asked a few people I know who also do websites and no one really could give me a straight answer as to why the animation wont work.
I have a falling leave animation on a website that when you click on the leaf it falls. The image does "fall" according to the browser (visible if you hover over the link tag in developer tools you can see the blue box fall down) but the actual image stays put or only drops a few pixels on the screen. I have no idea why this is happening at all its really confusing.
So how its supposed to go is this: user clicks the leaf, jquery changes the class, and the leaf animation is triggered making the leaf look like its falling.
#-webkit-keyframes fallingLeaves {
0% {
opacity: 1;
-webkit-transform: translate(0, 10px) rotateZ(0deg);
-moz-transform: translate(0, 10px) rotateZ(0deg);
-ms-transform: translate(0, 10px) rotateZ(0deg);
-o-transform: translate(0, 10px) rotateZ(0deg);
transform: translate(0, 10px) rotateZ(0deg);
z-index: 100;
}
75% {
opacity: 1;
-webkit-transform: translate(100px, 600px) rotateZ(270deg);
-moz-transform: translate(100px, 600px) rotateZ(270deg);
-ms-transform: translate(100px, 600px) rotateZ(270deg);
-o-transform: translate(100px, 600px) rotateZ(270deg);
transform: translate(100px, 600px) rotateZ(270deg);
z-index: 100;
}
100% {
opacity: 0;
-webkit-transform: translate(150px, 800px) rotateZ(360deg);
-moz-transform: translate(150px, 800px) rotateZ(360deg);
-ms-transform: translate(150px, 800px) rotateZ(360deg);
-o-transform: translate(150px, 800px) rotateZ(360deg);
transform: translate(150px, 800px) rotateZ(360deg);
z-index: 100;
}
}
this is one of the animations of one of the leaves (there are different animations to make the leaves fall differently).
If anyone could help me it would be awesome. I've tried a lot and asked quite a few people and got nothing. Thanks
The website this is located on so you can check it out is www.shearmadnesshoboken.com
I should note that the animation does work on Google Chrome on Linux. I also think it works in safari all but one of the leaves fall correctly there (why only one of them doesn't fall is beyond me but yeah).
This looks like a browser bug to me. Check if your Linux version is the same as your (Mac?) version. A workaround I found was removing rotateZ(0deg) in your first keyframe (which you don't really don't need to specify).
0% {
opacity: 1;
-webkit-transform: translate(0, 10px);
-moz-transform: translate(0, 10px);
-ms-transform: translate(0, 10px);
-o-transform: translate(0, 10px);
transform: translate(0, 10px);
z-index: 100;
}
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.