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.

Now answer the exercise about the content:

_Which command is used to move an element in a certain direction, specified in pixels or in percentage?

You are right! Congratulations, now go to the next page

You missed! Try again.

Article image Flexbox in CSS

Next page of the Free Ebook:

28Flexbox in CSS

3 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !

Get it on Google Play Get it on App Store

+ 6.5 million
students

Free and Valid
Certificate with QR Code

48 thousand free
exercises

4.8/5 rating in
app stores

Free courses in
video, audio and text