Introduction:

Cascading Style Sheets (CSS) is a style-sheet language used to describe the presentation of a document written in HTML or XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

CSS helps to make a web page stylish and user-friendly and the CSS Transform property makes a web page more dynamic and add some animations like. Let's learn it briefly.

What is Transform?

CSS transform is a property that allows you to modify the appearance and position of an element. It supports various transformations, such as translation, rotation, scaling, and skewing. These transformations can be applied in 2D or 3D space, enabling dynamic, help to make animations and interactive design effects without altering the document flow.

CSS transforms are

• scale( )

• skew( )

• translate( )

• rotate( )

Scale( ):

scale( ) resizes an element on the 2D plane. It takes two values: scale(x,y), where x represents the horizontal scaling factor, and y represents the vertical scaling factor.

CSS

/* scale along the x-axis */
.element {
  transform: scaleX(2);
}

/* scale along the y-axis */
.element {
  transform: scaleY(1.5);
}

/* scale along the x- and y-axis */
.element {
  transform: scale(1.2);
}

scaleX( ):

The scaleX( ) method increases or decreases the width of an element.

Let's see an example:

ScaleY( ):

The scaleY( ) method increases or decreases the height of an element.

Let's see an example

scale( ):

scale method increases or decreases both height and width.

Let's see an example:

Skew( ):

Tilts an element to the left or right, like turning a rectangle into a parallelogram. This property changes the size of an element along the X and Y axes on a 2D plane. It takes two values, representing the angles of skew in degrees. A positive angle skews the element to the right, while a negative angle skews it to the left.

CSS:

.element {
  transform: skewX(20deg); /* Horizontal skew */
}

.element {
  transform: skewY(10deg); /* Vertical skew */
}

.element {
  transform: skew(20deg, 10deg); /* Both horizontal and vertical skew */
}

SkewX( ):

The skewX( ) method skews an element along the X-axis by the given angle.

Let's see an example

SkewY( ):

The skewY( ) method skews an element along the Y-axis by the given angle.

Let's see an example:

Skew( ):

The skew( ) method skews an element along the X and Y-axis by the given angles.

Let's see an example:

Rotate( ):

The rotate( ) method allows you to revolve an element around a fixed point on the 2D plane without deforming it. It takes a single parameter representing the rotation angle in degrees. Positive values rotate the element clockwise, while negative values rotate it counterclockwise.

CSS:

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

Rotate( ):

Here’s a simple animated example where a square continues to rotate 360 degrees every three seconds:

We can also use the rotateX( ), rotateY( ) and rotate functions, like so:

Translate:

This transform function moves an element sideways, or up and down. Why not just use top/left/bottom/right? Well, it’s a bit confusing at times. I would think of those as layout/positioning (they have better browser support anyway) and this as a way to move those things around as part of a transition or animation.
The values can be specified in pixels (px), percentages (%), or other CSS length units.

Here's an example that moves an element 70 pixels to the right and 30 pixels down:

CSS:

.element {
 transform: translate(70px, 30px);
}

Negative values can also be used in the translate( )method to move the element in the opposite direction. For example, to move an element 70 pixels to the left and 30 pixels up, you can use the following CSS:

.element {
 transform: translate(-70px, -30px);
}

Translate( ) also can be used in only one axis:

transform: translateX(30px);
transform: translateY(-50px);

Let's see all types of translate with box animation:

@keyframes :

The @keyframes rule specifies the animation code. The animation is created by gradually changing from one set of CSS styles to another.During the animation, you can change the set of CSS styles many times. Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, and 100% is when the animation is complete.

Matrix:

The matrix transform function can be used to combine all transforms into one. It’s a bit like transform shorthand, only I don’t believe it’s really intended to be written by hand. There are tools out there like The Matrix Resolution, which can convert a [ group of transforms into a single matrix declaration. Perhaps this can reduce file size in some situations, although author-unfriendly micro-optimisations like that are likely not worth your time.

This code :

rotate(5deg) translate(20px, 10px)

can be converted as:

matrix(0.996195, 0.0871557, -0.0871557, 0.996195, 19.0523, 11.7051)

Transform-box:

The transform-box property in CSS specifies the layout box to which a transform or animation is applied.

Content-box:

This is a default value for 'box-sizing'. The width and height properties include only the content. Padding, border, and margin are added outside the defined width and height. Total width = content width + padding + border , Total height = content height + padding + border

Border-box:

The width and height properties include the content, padding, and border. Total width = defined width (content + padding + border). Total height = defined height (content + padding + border)

div {
  width: 200px;
  height: 100px;
  padding: 20px;
  margin: 20px;
}

.content-box {
  background-color: lightblue;
  box-sizing: content-box;
  border: 5px solid blue;
}

.border-box {
  background-color: lightgreen;
  box-sizing: border-box;
  border: 5px solid green;
}

Content-box: Total Width = (200+20+20+5+5)px = 250px

Total Height = (100+20+20+5+5)px = 150px

Border-box: Total Width = 200px

Total height = 100px

Transform-origin:

The transform-origin is the point around which a transformation is applied. For example, the rotate( ) function's transform-origin is the rotation's center. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element.

CSS:

.element-1 {
  transform-origin: bottom right;
}

.element-2 {
  transform-origin: 90px 30px;
}

Let's see the transform-origin property by showcasing a box rotation in different points.

Transform-style:

The transform-style CSS property sets whether children of an element are positioned in the 3D space or flattened in the element's plane.

CSS:

.element1{
    transform-style: flat;
}
.element2{
    transform-style: preserve-3d;
}

Flat:

Indicates that the children of the element are lying in the plane of the element itself.

Preserve-3d:

Indicates that the children of the element should be positioned in the 3D-space.

Conclusion:

If you found this blog post helpful, please consider sharing it with others who might benefit.

If you like the blog please connect me on Twitter(X), LinkedIn .

Thank you for reading :)