I'm trying to make sort of flip effect using CSS3.
Here's an example: http://jsfiddle.net/MNhK7/
There is one problem though, as you can see in Chrome 19 or FF 11 the element is displaced during the transition but the end and start position is as it should be, why?
I've set transform-origin which I thought was supposed to prevent this from happening, what am I missing?
Silly me, I of course had to specify a transform-origin initially that's the same or it's animated from 50% 50%
Related
The Goal: to create a fixed background position in a transformed element that works in Firefox.
I have tried all solutions on this page (and a handful of others), but none have worked:
Fixed attachment background image flicker/disappear in chrome when coupled with a css transform
Things I have tried using are static positions, backface visibility setting, z-index setting, other background-attachment stuff.
Demo:
https://jsfiddle.net/96u9xqbn/6/
.fixed1 {
transform: translateZ(0);
}
If you remove the transform above, it works. But, If you're using something like Skrollr, or have another need for the transform, then the background is not properly fixed in firefox.
Unfortunately this is not bug, but a change of scope.
There was a problem where browsers were inconsistent in their behaviour with background-attachment:fixed; inside transformed elements, which was causing additional inconsistencies with 3D transforms.
The spec for background-attachment was adjusted to include a rule that elements within transformed elements would have their background-attachment rules set to scroll.
Firefox and Edge have both conformed to the new spec, Chrome has so far not deployed the change on their side (at the time of posting this, their bugtracker shows 30 Nov as their end date)
Workaround:
The quickest and easiest way to work around this change of spec would be to use a parallax library to hit this for you. A fairly popular one is called Skrollr, and I've adjusted your fiddle to include it.
Essentially you can just add data-0 and data-10000 attributes to your element, and then initialise the library using skrollr.init();
This has the drawback of using a library for something that was previously achievable in clean CSS, but it does also carry positive weight in that a parallax background is much easier on the eyes than a fixed background.
I have a background image that has a parent div with a transform: scale with an animation applied to it, giving the effect of the background image zooming in slowly when you land on the page.
It renders perfect accross the board except in ie 10/11. I've got all the proper pre-fixes added in, but still get a really shaky and choppy animation in ie.
I've researched and applied acceleration hacks, but nothing gives.
Does anyone have a fix or has seen something along these lines?
Thanks!
I had the same problem, but just with an image, not background image, and for me the solution was to give transform: rotate(0.01deg); to the parent of the scaled element.
Of course you will have a minimal rotation, so it depends on your css codes, if this wouldn't cause another problem.
Most likely it's because it's an image and there are not "in between" pixel renderings when doing transforms. I'm not sure there's a solution to this problem right now.
You could try doing it in canvas, though I know that's usually not the desired route to go.
I should preface this by saying that I am brand new to the world of SVGs. I'm playing around with a rather simple experiment using SVGs and CSS3 animations.
I have created the SVG in Inkscape and saved it as a plain SVG. I've then put it into HTML to play around with some CSS3 animations.
As you can see from my link below the whole SVG bounces strangely, this can be removed by removing the .arm class from the CSS. (which stops the single red circle group that has an arm class).
The problem is that I want the red circle groups to animate (spin) whilst the entire larger group is also spinning.
Any ideas or blatant things I may be doing wrong? (I do realize it's not the best SVG but I was just experimenting).
http://codepen.io/Fernker/pen/cwvfB
Note 1: After playing around a bit more if I remove either .arm or .center CSS rules then the wobble stops, but together they produce the wobble.
Here I fixed it for you (kind of).
http://codepen.io/anon/pen/unmfE
Basically I hacked it so it works, but you'll need to wrap your SVG in another container and have that rotate from center. If you animate too far down the nest, it will be affected by siblings.
It looks as though the shape is not creating a perfect circle when spinning, therefore shifting the center whilst spinning causing the wobble.
i'm a bit lost here, i'm currently testing the IE10 (10.0.9200.16384) that came with the Windows 8 Release Preview, and i'm having a very hard time. One of the things that are bugging me, is that IE doesn't seem to handle nested 3D Transforms corrently. Please see this fiddle:
http://jsfiddle.net/uUHdF/1/
There are two colored divs, a red one, and a green one rotated and translated so that it acts as the top of a cuboid, and this cuboid itself is rotated and translated too (note that i can't use transform-origin with rotate only because it is/was buggy in Webkit... just in case that might be part of a possible fix). It should look like this:
It's working as expected with Chrome and Firefox, but in IE10 the green div is missing:
Does anybody know if i'm missing something, or whether it's maybe a bug?
IE10 Does not support:
transform-style: preserve-3d;
I have the following code:
http://jsfiddle.net/RFMxG/1/
When the transition runs, you can see a padding of about 20-30 pixels on the left hand side. Despite the fact I have set the transform-origin to be 0,0,0, it is still not correctly rotating about the y-axis. The left edge of the blue box should be flush against the left hand edge at all times during the animation.
Can anyone tell me what I've done incorrectly?
Okay, there are whole bunch of issues here:
1) CSS transforms aren't animatable using transitions. If you look at the W3C list of transitionable properties, you'll notice that transform isn't there.
2) -webkit-perspective only affects the children of the element it is applied to, not the element itself. Read the Safari blog on this:
The interesting thing about -webkit-perspective is that it does not
affect the element directly. Instead, it affects the appearance of the
3D transforms on the transformed descendants of that element; you can
think of it as adding a transform that gets multiplied into the
descendant transforms. This allows those descendants to all share the
same perspective as they move around.
3) It's awesome that you posted a fiddle, but since this is a CSS problem, for future reference it would have been a lot easier if you cleaned out all the javascript, and used one set of browser prefixes only. Help us help you!
4) What you probably want to use is an animation. Here's a highly modified version of your fiddle that works on hover:
http://jsfiddle.net/RFMxG/4/
5) If javascript is your skill set, and you're at all concerned about browser compatibility (which of course you are!), I highly recommend doing these kinds of animations with jstween.
Right, so the solution was actually due to the fact the transform origin needs to be set prior to the animation starting (it cannot be set at the same time the -webkit-transform property is set).
I've updated the fiddle to demonstrate this now works correctly.
http://jsfiddle.net/RFMxG/5/