What is the difference between -webkit-transform: perspective and -webkit-perspective (given on -webkit- as the vendor.)
I tried this in the same case, but they return different result. Anyone know if it actually gives any difference?
I think this is a pretty clear explanation:
The -webkit-perspective property applies the same transform as the perspective() transform function, except that it applies only to the children of the element, not to the transform on the element itself.
Source: CSS property: -webkit-perspective
Related
I would like to add a transition on an element when I am changing its position (from static to fixed).
I tried doing a transition: transition: position 2s linear; but it actually doesn't do anything. Is there anything else I could try ?
Thanks
You're using the declaration properly, however you can only transition numeric values - this is because transition will calculate inbetween steps for the two values you're transitioning between, and while 0% and 100% have steps inbetween, there is no valuefor three-quarters-fixed-one-quarter-static.
The working draft for the transition shorthand has a few pointers on what can reasonably be animated.
In other words, you won't be able to animate this with transition, so the only possible way is likely through JS at this point. With the code you provided, that is impossible to say, though.
I did setup an HTML page where I use z-index to set the elements "visual" order.
It works as expected; but breaks when I use transform: scale().
#blocks-both{
transform: scale(0.9);
}
I make a simplified example here : http://codepen.io/anon/pen/LNYrar
I read a lot of messages regarding this particular problem, but I can't find a solution to make my design work.
I guess I don't understand something regarding this.
Could someone help ?
Thanks !
This is a known issue:
css z-index lost after webkit transform translate3d
webkit-transform breaks z-index on Safari
webkit-transform overwrites z-index ordering in Chrome 13
You can read more about it here as it offers in depth explanation.
In addition to opacity, several newer CSS properties also create stacking contexts. These include: transforms, filters, css-regions, paged media, and possibly others. As a general rule, it seems that if a CSS property requires rendering in an offscreen context, it must create a new stacking context.
You could avoid this issue by moving the transform properties from #blocks-both to #block-main and #block-sidebar like this:
#block-main, #block-sidebar {
transform: scale(0.9);
}
#block-main {
transform-origin: 100% 0;
}
#block-sidebar {
transform-origin: 0 0;
}
I've also edited your example.
I'm just doing codeschool and they told me:
SORRY, TRY AGAIN
transform must be defined last, after the browser prefix styles.
and here is my code:
img:hover {
-webkit-transform: translate(10px,20px);
-o-transform: translate(10px,20px);
transform: translate(10px,20px);
-moz-transform: translate(10px,20px);
}
As I always do I start to playing with my code and discover that I don't need this line of code:
transform: translate(10px,20px);
at all! Everything is working without it! Then I tried to delete all these stuff
-webkit-transform: translate(10px,20px);
-o-transform: translate(10px,20px);
-moz-transform: translate(10px,20px);
and leave
transform: translate(10px,20px);
only. What a surprise! it doesn't work! So here is my first question:
Why do I have to define line transform: translate(10px,20px); without -o-/-webkit-/-moz-
if it doesn't work at all?
and than second:
WHy codeschool tells that
SORRY, TRY AGAIN
transform must be defined last, after the browser prefix styles.
Why?
CodeSchool is forcing you to use a CSS best practice. This one is has a good reason: future-proofing. Why/how?
CSS3 isn't quite standard yet, but that hasn't stopped the people at Google or Mozilla from trying to implement the features. Problem is, since CSS3 is changing, those guys aren't quite sure how it works. To get around this, the non-standard prefix notation (-moz- or -o- rules) were created as transitional rules to use while the CSS3 spec is slowly finalized.
But this created a new problem: "what to do with these rules once CSS3 is finalized?" That is what the 'Cascade' in CSS is for: rules lower-down take priority over those higher up. By adding the 'standard' rule below the extension ones, it will override the browser-specific ones only when the browser supports it.
Thus, we can use features bleeding-edge browsers today, while being ready for the standards tomorrow, and do it with the same CSS file!
the -o-/-moz- etc.. are browser specific declarations which are in place to allow browsers that don't support the native property but have their own implementation.
You should always have the regular property without the prefix. Prefixes are only their to extend the range of browsers that will apply the property.
The specific order of the properties will have no effect on the page output, however depending on how strict a validator is it may tell you that it's not valid unless the unprefixed property is written last
-webkit-transition-property: translate
-webkit-transform:translate(-320px, 0px);
I have those lines in my css file but this doesn't work in chrome: if I fire up chrome developer tools and inspect css for elements whose style contains those lines i see an hazard icon that tells 'invalid property value'
what happens? is this obsolete?
You need to use the exact css style in the value of transition-property. So what you would want is:
-webkit-transition-property: -webkit-transform
Whatever the value is needs to be a legit CSS property (exactly). Lemme know if this works! Seems good to me in Chrome.
I'm trying to apply some CSS3 transitions on some headers in a website I'm working on, but there's something about transitions on elements that contain text that really bugs me: in browsers that apply hinting or grid-fit a font's glyphs (which I guess is most of them, bar perhaps Safari), there is a noticable 'jump' at the beginning and end of a transition where you can see that text is snapped back to the pixel grid, as demonstrated in this jsfiddle: http://jsfiddle.net/8csA9/20/ (part of this is probably a momentary 'blur' due to filtering, but there's definitely some shape modification going on here, at least in FF and Chrome)
Normally I'd not even consider messing with the intricacies of font-rendering, but considering the glyphs are so large I feel that it doesn't really matter in this case, and was wondering if there is either a way to disable hinting, or some other way of making these transitions a bit smoother. Does anyone know if this can be done, and how?
PS: This question actually extends a bit beyond just transitions, just applying a static rotation also makes at least Firefox continue to hint the text, and the result ends up looking rather.. odd
PPS: There does seem to exist (or have existed) a '-webkit-font-smoothing' property, but the CSS3-fonts draft appears to have dropped the rule it was based on (font-smooth), and it seems it only ever worked on Chrome for the Mac
Use backface-visibility: hidden;
**Update: webkit moz mz and the standard
http://jsfiddle.net/jugularkill/58S2z/4/
More on backface visibility:
http://www.w3schools.com/cssref/css3_pr_backface-visibility.asp
This worked like a charm for me. I added "backface-visibility:hidden" (plus major browser prefixes) to the elements with the transition property, and it fixed the jump/jitter I was experiencing during the transition. I tested in Firefox, IE (9/10) and Chrome.
One thing I noticed though: Make sure you add the property to the element's natural state, as opposed to the pseudo-class (e.g. hover, active...) of an element.
For me I found that I needed to add both backface-visibility: hidden and transform-style: preserve-3d to the element that contained jumpy content.
For example:
.element-with-jumpy-content {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
If you're using Bootstrap you can use this class:
.backface-visibility(hidden);
Adding transform: translate3d(0, 0, 0); or transform: translateZ(0); often helps to fix transition bugs, because it forces browser to use hardware-accelerated 3D transitions.