Comments on: transform

By: Thomas

Thomas — Fri, 29 Jul 2022 13:44:57 +0000

Just found SkewJS: https://github.com/wiserim/Skew

Everyone who has ever searched a way to have skewed elements with a reliable pixel with should have a look.

I have no idea why this repo is that unknown. Handling skewed contents with deg-values is pure hell on earth, especially when it comes to responsive design. Hopefully CSS will support pixel values in the future.

By: Woody

Woody — Wed, 13 Oct 2021 09:03:18 +0000

Hello Thanks for your article
I am using “transform” to make the title font that does not have a condensed version more compact.
But I have problem resizing the whole container.
How do I indicate only text compression while leaving the containers at their normal adaptive size?

h3.name-class {
transform: scale(0.8,1);
transform-origin: left;
}

Thank you

By: Brian van Vlymen

Brian van Vlymen — Tue, 08 Dec 2020 00:46:28 +0000

Why does not working with Javascript rotate from 0 degree to 360 degree?

    let box2 = document.querySelector(".box2");
    let changeDeg =0;
    let myCallback = () => {
        console.log("here");
        };


    for(i=0;i<360; i++){
        // console.log(i);
        setInterval(myCallback, 1000);
        changeDeg++;
        console.log(changeDeg);
        box2.style.transform = `rotate(${changeDeg}deg)`;
        if(changeDeg == 360){
            changeDeg = 0;
        }
    }

By: Tommy D.

Tommy D. — Tue, 14 Apr 2020 00:23:42 +0000

There’s a case where you’d have to animate using position:top — when you want to slide content down and there is a fixed header, because https://stackoverflow.com/a/15256339/452587.

By: Univac

Univac — Thu, 09 Apr 2020 10:04:37 +0000

You don’t mention the order in which CSS transforms will be activated in a list.

“It’s worth noting that there is an order in which these transforms will be carried out, in the example above skew will be performed first and then the element will be scaled.”

By: Geoff Graham

Geoff Graham — Tue, 17 Dec 2019 15:20:32 +0000

In reply to Venkat. Thanks for the heads up! Got that in there. :)

By: Venkat

Venkat — Tue, 17 Dec 2019 01:33:52 +0000

Does the article needs an update? There is skew shorthand property!
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew

By: Swarup

Swarup — Thu, 07 Feb 2019 15:15:29 +0000

In reply to shahryar.

https://codepen.io/uiswarup/full/WPEZqd

3d rotate

By: Zheng Lai

Zheng Lai — Thu, 15 Nov 2018 00:13:23 +0000

You refer to the transform functions three different ways:
1) “But scale() is just one of many transform functions that are available:”
2) “With a space-separated list you can add multiple values to the transform property:”
3) “Most of the above properties have 3D versions of them.”

Is the correct terminology just function?

By: Tim

Tim — Thu, 08 Nov 2018 04:53:01 +0000

Transform appears to break effects/actions within an element. Eg background-attachement:fixed; or :hover does not work in a div that has had a transform applied to it, nor children thereof (not fully tested).

By: mestrecarrasco

mestrecarrasco — Fri, 05 Oct 2018 14:54:23 +0000

I believe that it's probably worth mentioning that transform only applies to certain display types. I've read through this article, and wrote this simple code:

<span class="close">×</span>

and

.close {
  transform: rotate(45deg);
}

It seems ok, but it does not work, because the <span> is a inline element. This problem can be solved by understanding this, and just adding display: inline-block at the .close rule. So, I believe that this article would be improved if it mentioned which elements can be target by each transformation function.

By: Hitesh Sadhrakiya

Hitesh Sadhrakiya — Thu, 06 Sep 2018 07:21:09 +0000

Hello all,
Is it mandatory to use below things to support all browsers?

-webkit-transform: value;
-moz-transform: value;
-ms-transform: value;
-o-transform: value;
transform: value;

By: Anonymous

Anonymous — Sat, 26 May 2018 18:18:40 +0000

In reply to gujrit singh. You got a "`" in before your code, that's why.

By: Joonatan Saarhelo

Joonatan Saarhelo — Sun, 08 Apr 2018 10:38:48 +0000

You definitely can write the matrices by hand. All the other transformations are just shorthands for matrices. Learning matrix math will teach you why differently ordered transformations work like they do.

The 4×4 matrix has 3 parts:

the 3×3 matrix in the top left describes a linear transformation
the right side is the amount of translation
the bottom is for perspective. (Usually you’ll want to have just 0 0 0 1 at the bottom, which does nothing.)

The linear transformation matrix contains three vertical 3D vectors. They describe the how the x, y and z-axes are transformed, respectively. Imagine grabbing each axis and turning and stretching it until it until it is the corresponding vector and imagine that the space in between is rubber attached to the axes. For a better explanation, see this video: https://www.youtube.com/watch?v=kYB8IZa5AuE

By: Pierre Ferry

Pierre Ferry — Wed, 17 Jan 2018 17:17:57 +0000

In reply to Johan. Cary, i don't think there is a defined order, it depends on which instruction is written first. I just learnt today that 'translate (x, y) scale(z)' != 'scale(z) translate(x, y)'