CSS - 2d transform

Ethan D. -

Types of 2D Transforms

Translate

The translate function in CSS 2D transforms lets you move an element along the x-axis, y-axis, or both. It changes the position of an element without disturbing the normal document flow.

Example: CSS Translate

transform: translate(tx);
transform: translate(tx, ty);
  • tx is the translation along the x-axis (horizontal movement).
  • ty is the translation along the y-axis (vertical movement).

To move an element 50 pixels to the right and 100 pixels down:

Example Translate

transform: translate(50px, 100px);

The translate function is useful for creating animated effects, positioning elements, or building responsive designs where elements adapt to different screen sizes.

Rotate

The rotate function in CSS 2D transforms lets you rotate an element clockwise or counterclockwise by a specified angle. The rotation happens around the transform origin, which is the element's center by default.

Example: CSS Rotate

transform: rotate(angle);
  • angle is the rotation angle, specified in degrees (deg), gradians (grad), radians (rad), or turns (turn).

To rotate an element by 45 degrees clockwise:

Example Rotate

transform: rotate(45deg);

The rotate function is commonly used for creating circular navigation menus, tilting elements for visual interest, or building interactive effects on hover or click events.

Scale

The scale function in CSS 2D transforms lets you resize an element by a specified factor along the x-axis, y-axis, or both. It can make an element larger or smaller than its original size.

Example: CSS Scale

transform: scale(sx);
transform: scale(sx, sy);
  • sx is the scaling factor along the x-axis (horizontal scaling).
  • sy is the scaling factor along the y-axis (vertical scaling).

To double an element's size:

Example Double Scale

transform: scale(2);

To scale an element to half its size horizontally and keep its original size vertically:

Example Scale Horizontally

transform: scale(0.5, 1);

The scale function is useful for creating zoom effects, responsive images, or emphasizing elements on hover or focus.

Skew

The skew function in CSS 2D transforms lets you skew an element along the x-axis, y-axis, or both. It creates a slanted or oblique effect by distorting the element's shape.

Example: CSS Skew

transform: skew(ax);
transform: skew(ax, ay);
  • ax is the skew angle along the x-axis.
  • ay is the skew angle along the y-axis.

To skew an element by 20 degrees along the x-axis:

Example Skew

transform: skew(20deg);

The skew function is often used for creating stylistic effects, such as slanted buttons, parallax scrolling, or creating a depth illusion in flat designs.

Matrix

The matrix function in CSS 2D transforms is a powerful tool that lets you perform multiple transformations at once using a single matrix. It combines translate, rotate, scale, and skew transformations into a 3x3 matrix.

Example: CSS Matrix

transform: matrix(a, b, c, d, tx, ty);
  • a, b, c, and d represent the linear transformation matrix.
  • tx and ty represent the translation values.

To apply a combination of rotation, scaling, and translation:

Example Matrix

transform: matrix(0.866, 0.5, -0.5, 0.866, 50, 100);

The matrix function provides a way to express complex transformations concisely, but it can be challenging to understand and manipulate directly. It is often used in advanced animations or when precise control over transformations is needed.

Combining 2D Transforms

In CSS, you can combine multiple 2D transforms to create more complex transformations. By applying several transform functions to an element, you can achieve interesting effects and layouts.

To combine 2D transforms, you add multiple transform functions in the transform property, separated by spaces. The order of the transform functions matters, as each function is applied in sequence from right to left.

Example: General syntax for combining 2D transforms

transform: function1() function2() function3() ...;

Example: Combining rotate, scale, and translate functions

transform: translate(100px, 0) scale(0.5) rotate(45deg);

Example: Combining multiple 2D transforms for a visually interesting effect

.box {
  width: 200px;
  height: 200px;
  background-color: #f1c40f;
  transition: transform 0.3s;
}

.box:hover {
  transform: rotate(45deg) scale(1.2) translate(20px, 20px);
}

The transition property ensures a smooth animation when applying the transforms.

Practical Examples

Example 1: Creating a rotated and scaled image

Example: Creating a rotated and scaled image using CSS 2D transforms

<div class="image-container">
  <img src="image.jpg" alt="Sample Image">
</div>
.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image-container img {
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}

.image-container:hover img {
  transform: rotate(10deg) scale(1.2);
}

In this example, the image is wrapped inside a container with a fixed width and height. The overflow: hidden property is used to hide any parts of the image that may go beyond the container's boundaries when the image is transformed.

The img element has a width of 100% to fill the container, and its height changes automatically to keep the image's aspect ratio. The transition property is used to create a smooth animation effect when the transforms are applied.

On hovering over the image container, the image is rotated by 10 degrees and scaled by 1.2 using the rotate() and scale() transform functions.

Example 2: Building a skewed button with hover effect

Example: Building a skewed button with a hover effect using CSS 2D transforms

<button class="skewed-button">Click Me</button>
.skewed-button {
  padding: 12px 24px;
  background-color: #3498db;
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  transform: skew(-20deg);
  transition: transform 0.3s;
}

.skewed-button:hover {
  transform: skew(-20deg) scale(1.1);
}

In this example, the button element has a class of skewed-button. The button is styled with padding, a background color, text color, and font size using basic CSS properties.

The skew() transform function is used on the button to create a skewed effect. The button is skewed by -20 degrees along the x-axis, making it look slanted.

To add a hover effect, the transition property is used to create a smooth animation when the button is hovered over. On hover, the button is scaled by 1.1 using the scale() transform function, in addition to the existing skew transformation.

This combination of skew and scale transforms creates an eye-catching button with a skewed design and a hover effect that shows user interaction.

Example 3: Implementing a translated and rotated card layout

Example: Implementing a translated and rotated card layout using CSS 2D transforms

<div class="card-container">
  <div class="card">
    <img src="card-image.jpg" alt="Card Image">
    <h3>Card Title</h3>
    <p>Card description goes here.</p>
  </div>
  <!-- More card elements -->
</div>
.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.card {
  width: 300px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transform: translate(0, 0) rotate(0);
  transition: transform 0.3s;
}

.card:hover {
  transform: translate(10px, -10px) rotate(5deg);
}

.card img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

In this example, the card layout is made using a container element with a class of card-container. The container uses a flex layout with justify-content: center and align-items: center to center the cards both horizontally and vertically within the container.

Each card is shown by a div element with a class of card. The card is styled with a fixed width, padding, background color, and a box shadow to create a visually nice card-like look.

At first, the card is put at its original location using transform: translate(0, 0) rotate(0). This sets the starting point for the transforms.

To add an interactive effect, the transition property is used to create a smooth animation when the card is hovered over. On hover, the card is moved 10 pixels to the right and 10 pixels up using translate(10px, -10px), and it is rotated by 5 degrees using rotate(5deg).

The card content, such as an image, title, and description, is placed inside the card element. The image has a width of 100% to fill the card's width, and its height changes automatically to keep the aspect ratio.

This combination of translate and rotate transforms creates a dynamic and engaging card layout that responds to user interaction.