I'm currently learning front-end and in the course that I am taking (?) , we use transform: translate(-10px, 10px) but, I recently found an independent translate property that works and acts the exact same way. Does it mean that I should stop using transform and use individual properties instead?
According to CSS documentation here:
The translate, rotate, and scale properties allow authors to specify simple transforms independently, in a way that maps to typical user interface usage, rather than having to remember the order in transform that keeps the actions of translate(), rotate() and scale() independent and acting in screen coordinates.
So when you use transform and applies several transform functions (such as translate, scale or rotate), the functions order will effect the visual (which is hard to remember how each function effects the others).
When you use individual transforms you don't have to deal with it and the order doesn't matters.
No You Should not stop using it! as Sometime you may find it Better than using Individual property, In Some Cases.
Transform Property
The transform CSS property lets you rotate, scale, skew, or translate an element.
transform: translate(120px, 50%);
transform: scale(2, 0.5);
While Simply Translate
allows you to work with horizontal and vertical direction
transform: translate(100px, 200px);
transform: translate(100px, 50%);
So, With transform you can do multiple things in one line of code like Scale, Translate ,Rotate etc.
and simply Translate allows you to work in horizontal and Vertical direction.
Priority is given more to the individual Property i.e translate Here. Overriding of property can be Done
I think transform: translate(x,y); is the best way to move anything from its position. I did not hear about direct translate attribute which works.
Related
I have attached the code. Would like to know if there was a way to level the text, that is make it flat/horizontal in spite of it being around the circle? Kind of like its done here - replacing the images with text will illustrate this.
I tweaked the code a bit as I needed the wifi signals to be pointing outwards and so the the text seems to also be shaped accordingly. I considered perhaps trying to find the angle at which all elements around the circle would be horizontal but am unsure how to go about doing this. Does anyone know how to make the texts flat regardless of how many elements are around the circle?
Yes basically reverse the container rotation on the text. Also turn -45deg because it was added in the first place.
Change this in your .text classes
&:nth-of-type(#{$i}) .text {
transform: rotate(-$rot * 1deg - 45deg);
}
I've encountered this very annoying problem.
When you align an image with transform, translate percentage based it causes the image to blur slightly. This is only with percentage alignment
Consider this css:
img {
display: block;
height: auto;
max-width: 100%;
transform: translate(1%,1%);
}
Tried solutions:
translate3d fix
perspective fix
translateZ fix
Maybe somebody has an solution?
Updated: Js Fiddle
I updated the js fiddle with an image to better see the difference. It is very noticeable in photography.
Example image:
Thanks!
Try something like this
translateX(calc(-50% + 0.5px))
Using a percentage value with Transform: translate means it positions your element with sub-pixel accuracy. You can see the pixel-value offset of your second div in the jsfiddle when you query it in the console:
This means that your browser is forced to do some less than optimal anti-aliasing to position your image, and that's what's causing the blurriness. If you could position it to whole-pixel values instead the image would remain sharp.
I haven't found an elegant solution to this annoying problem, but with javascript (sorry, I know this is tagged as a css problem) it's conceivable you could measure the element's offset values, then remove the translate and measure the non-translated pixel offset values and then calculate the difference between the two offsets (difference in offset between pre and post translate). Then rather than putting translate(%, %) back onto your element you could round the differences you calculated to the nearest whole pixel value (ie: remove sub-pixel rendering) and then reapply those values as translate (px, px) instead. This would keep your image sharp. It's a less than optimal solution, but it's the best I've been able to come up with so far.
EDIT:
Here's a quick function I wrote that will do what I'm talking about above. Once again, I apologize that this is not a CSS solution, but I see no way to fix it with CSS. This is also not a great solution in that you lose the responsiveness of % values, and it will also overwrite any Transform attributes that aren't translateX or translateY (so maybe use a wrapper div if that's a problem). Somebody could probably solve that problem by doing this with a Transform matrix, but yeah...
[EDIT 2: updated function to account for any css transitions that may be assigned to element]
function snapTranslateXYValsToNearestPixel(element){
var xTransPos = $(element).offset().left;
var yTransPos = $(element).offset().top;
// turn off any transitions (but save values first):
var transitionVal = $(element).css('transition');
$(element).css('transition', 'none');
// turn off translate:
$(element).css('transform', 'translateX(0) translateY(0)');
var xPosDiff = xTransPos - $(element).offset().left;
var yPosDiff = yTransPos - $(element).offset().top;
var xPixelVal = Math.round(xPosDiff);
var yPixelVal = Math.round(yPosDiff);
var translateVal = 'translateX(' + xPixelVal + 'px) translateY(' + yPixelVal + 'px)';
$(element).css('transform', translateVal);
// reapply transition value (wait one tick for new css value to apply first):
setTimeout(function() {
$(element).css('transition', transitionVal);
}, 1);
}
Again, not a totally ideal solution... BUT it WILL convert the translateX and translateY percentages of your element to whole pixel values and it will give you a nice crisp image.
Example usage:
snapTranslateXYValsToNearestPixel('.align-per');
I just had the same problem with an overlay which moves to the middle of the window via CSS and the content determines the height and width. The overlay also has a maximum height and width.
Besides, I got some CSS transitions on the overlay I didn't want to lose.
All CSS fixes described here did not work.
I got rid of the blur by using JavaScript to ensure that the overlay is always divisible by 2. I call this function when creating the overlay, as well as when resizing the window.
Theoretically, the overlay works without JS - but with JS it's sharper. And it do not need any timeouts to keep the transitions work.
fullPixelFix = function() {
var overlay = $('#overlay');
overlay.removeAttr('style');
var dividable_width = Math.round(overlay.outerWidth() / 2) * 2;
var dividable_height = Math.round(overlay.outerHeight() / 2) * 2;
overlay.outerWidth(dividable_width).outerHeight(dividable_height);
overlay.css(maxWidth: dividable_width, maxHeight: dividable_height);
}
I found this fix here : CSS: transform: translate(-50%, -50%) makes texts blurry
div.align-per {
transform: translate(1%, 1%) translateZ(0) ;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
}
I think it's worth investigating for others browsers.
I am using easel js for working with a drawing application and have functionality like resize rotate etc. For a task I need to write a letter on a image and used a container and added image and text as children.
Now the issue if I transform the container I don't need to reverse the letter only image.
I am using the following link for transformation:
https://github.com/senocular/TransformTool
Attach: https://www.dropbox.com/s/vxg84liohd24knh/Untitled.png?dl=0
If you are able to target the sub-content, you can un-transform it simply using:
// Simple un-flip
clip.subClip.scaleX = 1/clip.scaleX;
If you need more complex un-transforms, you might need to spend some time on the math to do that for each property, or look into Matrix transformations.
The easiest way is to decouple the element from the container. Have it be a sibling that updates its position to match. This gives you much better control over the display.
I'm wondering wether I can combine data-tags with animations in CSS. I have a list of an undefined amount of items which are rendered by a javascript templating engine. As soon as the JS finished rendering them I would like to fade them in one after another without having to write a huge bunch of CSS selectors. This was my initial thought, when i only had about 6 elements been added dynamically. Due to the fact that it might get an undefined amount and should still look good I'm facing the described problem.
Is this possible? How do i need to write my CSS?
li.shown {
-webkit-animation: animateIn .8s forwards;
-moz-animation: animateIn .8s forwards;
animation: animateIn .8s forwards;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
transition-delay: 0;
-webkit-transition-delay: attr(data-animation-offset ms);
-moz-transition-delay: attr(data-animation-offset ms);
transition-delay: attr(data-animation-offset ms);
}
My listitems might look like this and the data tag is calculated by js:
<li data-animation-offset="2000" class="shown"></li>
Ofcourse the easiest solution is using the good old style tag, but the coolest one might be the css version.
Thanks in advance
Currently the attr() CSS function can not be used outside of the content property.
MDN
Yes and no. The current revision of the standards does allow this usage. It first states:
In CSS2.1 the ‘attr()’ expression always returns a string. In
CSS3, the ‘attr()’ expression can return many different types. The
‘attr()’ expression cannot return everything, for example it cannot do
counters, named strings, quotes, or keyword values such as ‘auto’,
‘nowrap’, or ‘baseline’. This is intentional, as the intent of the
‘attr()’ expression is not to make it possible to describe a
presentational language's formatting using CSS, but to enable CSS to
take semantic data into account.
The correct syntax is now:
attr( <attr-name> <type-or-unit>? [ , <fallback> ]? )
And then states:
The optional argument is a keyword drawn from the list
below that tells the UA how to interpret the attribute value, and
defines a type for the attr() expression. If omitted, ‘string’ is
implied.
Further below, we read that ms is a valid type-or-unit value, detailing:
The attribute value must parse as a NUMBER CSS token, and is
interpreted as a dimension with the specified unit. The default is ‘0’
in the relevant units, or else the property's minimum value if ‘0’ in
the relevant units is not valid for the property. The default must
also be used if the property in question only accepts values within a
certain range (e.g. positive lengths or angles from 0 to 90deg) and
the attribute is out of range (e.g. a negative length or 180deg). If
the unit is a relative length, it must be computed to an absolute
length.
Therefore, the syntax you provided is correct and valid according to this document. The Mozilla Developer Network documentation also confirms that this is valid usage. Going on to confirm at the bottom of the page that "Usage in other properties than content and with non-string values" is currently not supported in any browser. There's a CR for Gecko currently in 'NEW' status.
So yes, it is allowed. No, it doesn't work in any current browser nor will it do so anywhere soon.
It should also be noted that the current Candidate Recommendation for CSS3 explicitly begins with the following note:
The following features are at-risk and may be dropped during the CR period: ‘calc()’, ‘toggle()’, ‘attr()’.
It is therefore not guaranteed that this feature will remain in CSS level 3, and as such whether it will be implemented at all.
With css alone i don't think it is possible, what you can do is like with jquery loop through your items and fade them.
Something like:
var timer=2000;
$('your li selector here').each(function(index){
setTimeout(function(){
$(this).fadeOut(200);
}, timer*index)
});
If I rotate a div having set the origin and then set the origin to something else and apply another rotation, only the second rotation is seen.
I understand that this is because that rotations are always done from the element's original position without transformations applied.
How would I perform a second rotation so that it is applied relative to the first rotation but with a new origin?
Okay I finally found a way to achieve what I wanted. You have to manually change the origin by translating and combine all transformations into one call to transform so that the translations and rotations create one transformation matrix and are therefore cumulative.
So for example if you want to rotate 30deg around 12,32 and then 20deg around 100,78 you would do:
#element{
transform: translate(-12,-32) rotate(30deg) translate(12,32) translate(-100, -78) rotate(20deg) translate(100, 78);
}