I want to rotate a simple GWT-Label. Is there any option?
I have set up a simple css-style:
.rotate{
/* Abs positioning makes it not take up vert space */
position: relative;
top: 330;
left: 330;
/* Border is the new background */
background: none;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
But it didn't work when I add the style to the label.
CSS transforms only work (using browser-specific CSS properties) in Chrome, Opera, Firefox, Safari and IE9+. You're using the proper transform syntax for all of these. For older versions of IE, you can transform like this:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
If you would like to make a vertical text, or any other text transformations I recommend to consider using SVG graphics.
Related
I have some css in which I style an ::after element with transforms to make it look like an arrow. The arrow should have a different rotation when the element is collapsed, which is indicated by the .collapsed class on its parent.
The code works fine in firefox and chrome, but safari applies no transformations. I manually added the -webkit prefix and later passed my files through the postcss autoprefixer but the problem remains.
I am using gatsby with css modules, but I think this should not be relevant. Is there anything obvious I am missing. The code is given below. Thank you.
.questionHeader::after {
content: ">";
display: inline;
margin-left: auto;
width: auto;
font-size: 2.5rem;
font-family: 'helvetica-bold';
color: var(--accent-color-two);
-webkit-transition: transform var(--animation-duration);
transition: transform var(--animation-duration);
-webkit-transform: rotate(-90deg) scaleX(.9, 1.5);
transform: rotate(-90deg) scaleX(90%) scaleY(150%);
}
.collapsed > .questionHeader::after {
-webkit-transform: rotate(90deg) scaleX(.9, 1.5);
transform: rotate(90deg) scaleX(90%) scaleY(150%);
}
I'm doing a hover effect that increases the images brightness and scales the image on hover state. For some reason the transform seems to choppy with the CSS filter. Any idea why this makes the transform choppy? Seems to be working smoothy on Safari and Firefox.
Basically I'm doing this:
.parent
width 300px
height 300px
overflow hidden
img
transition: all 1s ease-out
transform: translate(0px, 0);
filter: brightness(80%)
&:hover
transform: scale(1.1)
See full demo here: http://codepen.io/tzzo/pen/MmKeVm
Thanks.
Just had a look at the codepen on Chrome 56 and it's really smooth for me. However, if you want to increase the image brightness on hover you need to add the filter to the hover too:
img:hover {
-webkit-filter: brightness(100%)
filter: brightness(100%)
}
use this code in hover proerties-
.parent img:hover {-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); opacity: 1.0; filter: brightness(150%);}
I can't see the issue on my machine but I have had this problem at other times
You could try triggering hardware acceleration on the element by adding transform3d
.parent
width 300px
height 300px
overflow hidden
img
transition: all 1s ease-out
transform: translate3d(0,0,0)
filter: brightness(80%)
&:hover
transform: scale(1.1) translate3d(0,0,0)
Note you need to re-apply the translate when you alter the transform in the hover rule
I came up with a lightweight and well supported implementation.
I ditched CSS filters and decided to use opacity instead. If the background of the image doesn't work well with the you have to set it separately.
img
background-color: black
opacity: 0.8
transition: all 3s ease-in-out
&:hover
opacity: 1
transform: scale(1.1)
Added working solution to my pen: http://codepen.io/tzzo/pen/MmKeVm
img{
transition-duration: 5s;
transform: scale(1.0);
transform-origin: 50% 50%;
}
&:hover{
img{
transform: scale(1.2);
transform-origin: 50% 50%;
}
}
This is the code I have used for ken burn effect in images, it works very fine in ff, chrome and safari. But I don't know what is the problem in ie 11.
Can you help me with it.
I encountered the same issue and fixed my problem by adding a small to rotation to the image.
transform: scale(1.5) rotate(0.1deg);
I came across an article offering this solution for a bug in firefox but it also works for the internet explorer like a charm.
How can I rotate 90 degrees in IE 8 and lower, using only CSS?
.horizontal {
display: block;
width: 300px;
height: 100px;/*height*/
background: #FF0000;
margin: auto;
margin-top: 110px;
text-align: center;
border: 5px solid #000000;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
You want to use filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
CSS
.horizontal {
display: block;
width: 300px;
height: 100px;/*height*/
background: #FF0000;
margin: auto;
margin-top: 110px;
text-align: center;
border: 5px solid #000000;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(-90deg);
}
More information on this
writing-mode which is currently in the CSS3 draft specification allows us to accomplish text rotation without using propriety properties, effectively future proofing the concept as more browsers adopt the CSS3 draft spec.
p { writing-mode: tb-rl; }
That’s it incredibly simple CSS technique that will eventually work with all browsers as their CSS3 support gets better. This is one of the handful of CSS3 supported properties in IE. The tb-rl value tells the browser to display paragraphs with the text flowing from top to bottom, right to left. Essentially rotating the text 90 degrees clockwise and aligning to the right.
This properties true intention is for displaying other languages in their correct “writing mode” such as Japanese right to left or Arabic & Hebrew which display right to left & top to bottom (rl-tb).
Support
At the moment IE is the only browser to support it starting from IE5.5 and up, IE8 adds further values through using the -ms extension. There are 4 values available from IE5.5+ and an additional 4 values for IE8+ through the -ms extension.
lr-tb – This is the default value, left to right, top to bottom
rl-tb – This flows the text from right to left, top to bottom
tb-rl – Flows the text vertically from top to bottom, right to left
bt-rl – bottom to top, right to left
tb-lr – This and the followings value are only available in IE8+ using -ms-writing-mode. Text flows top to bottom, left to right
bt-lr – Bottom to top, left to right
lr-bt – Left to right, bottom to top
rl-bt – Right to left, bottom to top
Rotate text in other browsers?
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
Online Demo
-ms-writing-mode property
I am going to ask yet another question!
So, CSS Rotate works in ie9 but getting a rotate to work in a previous version is going to be the death of me!
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
This line of code rotates elements by 90 degrees, but around the same origin as the other browsers. If the element is too close to the side of the page, it might be rotated to the outside. Microsoft's IE docs do not make it clear how to set transform origins.
My full code is:
#quick {
position:fixed;
top:250px;
left:-158px;
}
#qmenu-wrapper {
background-image: url(../images/img_08.png);
background-repeat:repeat-x;
height: 35px;
width:350px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform:rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
Is there something we can do to make IE 7 and 8 handle rotations in the same way as 9?
Thanks.
Me!
IE5.5, IE6, IE7 and IE8 are supporting filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
IE5 don't support it!
Source
To change rotation origin using DX Filters just use Matrix filter to change the position of your element. You can have multiple filters on one element. You need to do a little math. Good luck with that!
Have a look at the title on the left of this site. I solved the rotation point issue by placing the item in a smaller element with overflow:visible and rotating that element. In other words I made my own pivot point.
In that example I also use writing-mode to rotate the text in IE since using filters disables font smoothing.
<style type="text/css">
/* This wrapper is required to rotate the text around the left edge */
#page_title {
overflow: visible;
position: absolute;
width: 38px;
-moz-transform: rotate(90deg);
-moz-rotation-point: 0 0;
-webkit-transform: rotate(90deg);
-webkit-rotation-point: 0 0;
-o-transform: rotate(90deg);
-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;
}
#page_title h1 {
display: block;
font-size: 70px;
font-weight: normal;
line-height: 38px;
color: #F3C1E0;
font-variant: small-caps;
width: auto;
}
</style>
<div id="page_title">
<h1>Inwardpath Publishers</h1>
</div>