# first.items[].content
So we must scale down edges along the y axis post-skew in order to get a rhombus again!

This scaling factor is the cosine of the skew angle, which doesn't change linearly with a linear change in the angle from -90° to 90°. We can approximate the change with cubic-bezier, but we can't use individual transform properties as those would place the skew after the scale.

So when I first coded this 5 years ago, I chose to use #JS.

#css #transform #maths #trigonometry #CodePen #webDev #coding

# first.items[].contentMap.en
So we must scale down edges along the y axis post-skew in order to get a rhombus again!

This scaling factor is the cosine of the skew angle, which doesn't change linearly with a linear change in the angle from -90° to 90°. We can approximate the change with cubic-bezier, but we can't use individual transform properties as those would place the skew after the scale.

So when I first coded this 5 years ago, I chose to use #JS.

#css #transform #maths #trigonometry #CodePen #webDev #coding

# first.items[].attachment[].name
--syf: cos(var(--sxa));
transform: 
  skewX(var(--sxa)) scaleY(var(--syf))

# first.items[].attachment[].name
--syf: cos(var(--sxa));
transform: skewX(var(--sxa));
scale: 1 var(--syf);
/* scale applied before skew here 👎 */
/* transform order matters!!! */