In my css i use the following code to rotate and scale on hover:
.myclass:hover img {
-ms-transform: scale(1.1) rotate(-20deg);
-webkit-transform: scale(1.1) rotate(-20deg);
-moz-transform: scale(1.1) rotate(-20deg);
transform: scale(1.1) rotate(-20deg);
}
This code works on Chrome but not on IE11. Any help?
Thank you in advance
I was having this same problem in IE 11, I could realize that if I reduce the time of the animation could works (ex. 0.3s). But that wasn't a solution for me.
While I was reading How to fix shaking CSS transitions in Firefox: https://gielberkers.com/how-to-fix-shaking-css-transitions-in-firefox/
I found one solution (for Firefox), and I thought that could work the same concept for IE.
The idea is rotate (the minimum possible) the div or image while your making the scale. Just like this:
#keyframes loading
0%
transform: scale(1);
50%
transform: scale(1.2) rotate(0.02deg);
100%
transform: scale(1);
I made this trick and works in IE 11
Related
I am using transform: translateX in order to be able to create a sliding effect.
The code works fine under Chrome.
In safari, in some screen resolutions and sometimes under firefox I get a small gap during the animation.
When the animated layer stops the gap dissapears.
Initially I have a
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
And after hover, I have a:
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
I have a makeup of my code here:
https://jsfiddle.net/e197mrsb/40/
I would be grateful if someone could help.
use margin 0 on hover class .....
I am using a js counter which works great in FF, Chrome, safari, IE 11-9 but for some reason the transitions are not working in ie 8/7 (see css code below).The top image is the counter in FF, Chrome, safari, IE 11-9. The second image is from ie8/7. Not sure what I am missing, any help would be greatly appreciated! Thanks!
.prev-top {
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
}
.prev-top.flip {
-moz-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
}
Unfortunately, transform is not supported in IE<9 (nor indeed is any other form of CSS animation), you will likely need to resort to another means of animation, such as .gifs (shudder)
I'm working on a site and I get a weird bug using transitions.
Website: http://nieuw.impress3d.nl/
I explain my actions below:
So if you visit the homepage the site is working fine and the hovers as well. (You can hover the big blocks in the middle of the page.)
If you then press the arrow to the right once in Chrome the background changes to the background color of the article and the image disappear behind it!
If I turn off overflow: hidden, it works fine, but then the whole idea of the transition would be gone.
Is this a known bug? And are there any solutions?
Thanks in advance!
Add translateZ(0) :
.project figure img,
.service figure img,
.owl-item figure img,
.service-item figure img {
width: 100%;
height: auto;
transform: translateZ(0) scale(1);
-ms-transform: translateZ(0) scale(1);
-moz-transform: translateZ(0) scale(1);
-webkit-transform: translateZ(0) scale(1);
-o-transform: translateZ(0) scale(1);
}
I am rotating an element left by 1 degree. And then rotating the element in it by -1 degree so that the inner element is straight.
Have tested this in Chrome and Safari and it works fine. But in FireFox the inner element rotate is being ignored (still untested in IE).
Any idea what might be wrong?
HTML:
<div class="rotated-left">
<div class="rotated-right">
<p>This text should be straight.</p>
</div>
</div>
CSS:
.rotated-left {
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
}
.rotated-right {
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
}
I tested in chrome, firefox and IE, didn't have issues with any of them. I even removed the browser-specific elements. Still worked.
Make sure you are calling your CSS correctly, maybe?
i was wondering if these two set of statements are equivalent or not. i thought they were but they seem to be doing different things.
-webkit-transform: rotate(45deg);
-webkit-transform: translateX(200px);
-webkit-transform-origin:0% 100%;
and...
-webkit-transform: rotate(45deg) translateX(200px);
-webkit-transform-origin:0% 100%;
it seems that on the first set of statements, only the translateX gets performed and rotate does not. i changed the order around for the first set of statements to...
-webkit-transform: translateX(200px);
-webkit-transform: rotate(45deg);
-webkit-transform-origin:0% 100%;
and it seems to just perform the rotate and not the translateX. does it just do the latter one? however by writing...
-webkit-transform: rotate(45deg) translateX(200px);
-webkit-transform-origin:0% 100%;
it does both the rotate first and then the translateX. i thought this was supposed to just be a shorthand of writing it. is it not?
here is a link to the code. it's really simple.
http://jsfiddle.net/gCeUe/2/
thanks for the help! clear and thorough help would be much appreciated = )
CSS is parsed in a way so that the last statement is the only one that is rendered:
color: red;
color: green;
color: blue; /* This is what the color will be */
When you write your code like this:
-webkit-transform: rotate(45deg);
-webkit-transform: translateX(200px);
-webkit-transform is set to rotate(45deg) and then overwritten with translateX(200px).
This is the correct syntax:
-webkit-transform: rotate(45deg) translateX(200px);