# first.items[].content
But now, we can compute the scaling factor as the cosine of the skew angle, animate the skew angle* and the scaling factor changes accordingly 🥳🎉

*@​property support needed

#css #trigonometry #CodePen #coding #maths #geometry #webDev #webDevelopment #transform #CSStransforms #tiling

# first.items[].contentMap.en
But now, we can compute the scaling factor as the cosine of the skew angle, animate the skew angle* and the scaling factor changes accordingly 🥳🎉

*@​property support needed

#css #trigonometry #CodePen #coding #maths #geometry #webDev #webDevelopment #transform #CSStransforms #tiling

# first.items[].attachment[].name
@property --sxa { /* skew angle */
	syntax: '<angle>';
	initial-value: -90deg;
	inherits: true
}

.square {
	--sxa: -90deg;
	--syf: cos(var(--sxa)); /* scale factor */
	transform: skewX(var(--sxa)) scaley(var(--syf));
	animation: sxa 2s ease-in-out infinite
}

@keyframes sxa { to { --sxa: 90deg } }