Ideas - -Original Box
Original Box
Rotate around a fixed point
transform: rotate(10deg);
Scale an element
transform: scale(0.75);
The Web Developer Bootcamp 2024
Colt Steele
CSS Transforms
The Transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.
W3Schools CSS Transforms MDN CSS Transforms
While Transforms are similar to Transitions, in the sense that they both "change" the way an element is displayed, however, Transitions do it through a timed, and animated process but with Transforms, the "change" is immediate, and with no animations.
If the property has a value different from none, a stacking context will be created. In that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains.
If the property has a value different from none, a stacking context will be created. In that case, the element will act as a containing block for any position: fixed; or position: absolute; elements that it contains.
*Warning: Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.
Here are a few examples
There are many transform options available. Click Here for a list of option, and proper syntax.