CSS Transformations

CSS transforms are one of the most powerful tools for creating interesting visual effects on a web page. With them, you can change the position, size, rotation and tilt of HTML elements, as well as apply perspective and transition effects.

2D Transformations

2D transforms are those that affect only the two-dimensional plane of the page. They include the following commands:

• translate(): moves the element in a given direction, specified in pixels or in percentage.
• rotate(): rotates the element around a center point, specified in degrees.
• scale(): increases or decreases the element's size, specified in percentage.
• skew(): Skews the element with respect to one of the axes, specified in degrees.

To apply a 2D transformation to an element, use the transform property, followed by the desired command. For example:

  
    .my-element {
      transform: translate(50px, 50px) rotate(45deg) scale(1.5);
    }
  

In this example, the .my-element element will be moved 50 pixels to the right and 50 pixels down, rotated 45 degrees around its center, and enlarged by 50% of its original size.

3D Transformations

3D transformations are those that affect the three-dimensional space of the page. They include the following commands:

• rotateX(), rotateY() and rotateZ(): Rotate the element around the X, Y and Z axes, respectively.
• translate3d(): moves the element in three dimensions, specifying the X, Y and Z coordinates.
• perspective(): Sets the perspective of the element, creating the illusion of depth.

To apply a 3D transformation to an element, use the transform property, followed by the desired command. For example:

  
    .my-element {
      transform: rotateY(45deg) translate3d(0, 0, -100px) perspective(500px);
    }
  

In this example, the .my-element element will be rotated 45 degrees around the Y-axis, moved 100 pixels backwards (on the Z-axis), and will have a perspective of 500 pixels. This will create the illusion that the element is moving away from the viewer.

Transitions

CSS transitions allow you to create smooth animation effects between two different states of an element. For example, you can make an element gradually change color when the mouse hovers over it.

To create a transition, it is necessary to use the transition property, specifying the property that will be animated, the duration of the animation and the type of transition. For example:

  
    .my-element {
      background-color: red;
      transition: background-color 1s ease;
    }

    .my-element:hover {
      background-color: blue;
    }
  

In this example, the .my-element element will have a 1 second smooth transition between red color (initial state) and blue color (end state) when the mouse hovers over it.

Conclusion

CSS transforms and transitions are powerful tools for creating interesting visual effects on a web page. With them, it is possible to transform and animate elements in an easy and flexible way, adding dynamism and interactivity to the design. It's worth exploring these possibilities and experimenting with different combinations to create surprising effects.

Next page of the Free Ebook:

28Flexbox in CSS

3 minutes