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.
Related
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.
This question already has answers here:
z-index is canceled by setting transform(rotate)
(7 answers)
Closed 6 years ago.
So i have an icon you can flip when you click on the card. The icon is an element of the card div.
They have the same animation when they are flipping (see code below).
In the fiddle the left card has a transformY when you click it, the right card has no transform at all. For showcase purposes I set the duration of the animation and transition to 2s so you can see what goes wrong in the left card. The z-index is totally different when you compare it to the icon in the right card.
I'd love to hear from you guys WHY this is happening, and I'd love to hear what I'm supposed to do to make it work correctly. Thanks!
/* FRONTFLIP */
#-webkit-keyframes frontFlip {
0% {
z-index: -1;
-webkit-transform: translate(-50%, -25%) rotateX(-180deg);
transform: translate(-50%, -25%) rotateX(-180deg);
}
50% {
-webkit-transform: translate(-50%, -75%) rotateX(-270deg);
transform: translate(-50%, -75%) rotateX(-270deg);
}
100% {
z-index: 1;
-webkit-transform: translate(-50%, -50%) rotateX(-360deg);
transform: translate(-50%, -50%) rotateX(-360deg);
}
}
/* BACKFLIP */
#-webkit-keyframes backFlip {
0% {
z-index: 1;
-webkit-transform: translate(-50%, -50%) rotateX(-360deg);
transform: translate(-50%, -50%) rotateX(-360deg);
}
50% {
z-index: -1;
-webkit-transform: translate(-50%, -75%) rotateX(-270deg);
transform: translate(-50%, -75%) rotateX(-270deg);
}
100% {
z-index: -1;
-webkit-transform: translate(-50%, -25%) rotateX(-180deg);
transform: translate(-50%, -25%) rotateX(-180deg);
}
}
This is because the specification describes that a transform different than the value none should create a new stacking context.
On MDN:
If the property has a value different than none, a stacking context
will be created. In that case the object will act as a containing
block for position: fixed elements that it contains.
I have a parent element skewed to make a parallelogram. I cannot seem to figure out how to unskew the child elements, I even browsed through multiple old Stack questions and found solutions, but it is not working for me.
Here is the link to the CodePen:
http://codepen.io/DerekDev/pen/MYQrrQ
I am using this to skew:
-webkit-transform: skew(20deg, 0deg);
-moz-transform: skew(20deg, 0deg);
-ms-transform: skew(20deg, 0deg);
-o-transform: skew(20deg, 0deg);
transform: skew(20deg, 0deg);
And this to unskew the child, but like I said, it is not working:
-webkit-transform: skew(-20deg, 0deg) !important;
-moz-transform: skew(-20deg, 0deg) !important;
-ms-transform: skew(-20deg, 0deg) !important;
-o-transform: skew(-20deg, 0deg) !important;
transform: skew(-20deg, 0deg) !important;
If anyone has any solution that could fix this, that would be great.
P.S. I need it in pure css :)
Just add a . before status so you can select class="status" instead of <status>
Never mind, I know the issue. It was just a simple typo in the code, I forgot to add a dot in the CSS.
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 try to do this once, but unsuccessfully, and now meet the same problem again.
I have to generate HTML table with vertical text like this:
and this HTML should be valid(the same) in excel.
Has anyone done this?
Something more - I am not able to use images too.
It's possible with this css:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
mso-rotate: 90;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
position: absolute;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
This can not be done using HTML only.
The following property will do the job if you want to rotate your text:
<td style="mso-rotate:90;">I Rotate</td>
http://fabianmejia.blogspot.pe/2008/11/rotate-text-in-web-generated-excel-file.html
<table>
<td style="mso-rotate:90;">No</td>
<td style="mso-rotate:90;">Name</td>
</table>