Level up your transition and transformations game

Transitions and transformations are the building blocks of CSS that help us create a movement to the elements. They are widely supported by all the browsers and creates smooth effects for your website.
They are simple and easy to use and you don't need a separate library like GSAP or Animate.css for simple animations.
There's a lot of potential for transitions and transformations if we dig deeper and let's go through some properties that make our animations and transformations smooth and effective.

1. 3d transformations:

Transformations can change the state of an object in both 2D and 3D planes. Almost all the transformation functions used in the 2D plane can be used in 3D with the addition of another co-ordinate i.e, the z-axis.

The most commonly used 3D transformation functions are:

• Translate3d(): It is a combination of translateX() , translateY() and translateZ().The syntax for translate3d is,

  .element{
       transform:translate3d(tx,ty,tz);
  }
  

  where tx, ty, and tz represent the length or percentage of how much the element moves in each direction.
• Rotate3d(): Similar to translate3d(), it is a combination of all 3 axes and rotates the element in the 3D space.

  .element{
       transform:rotate3d(x,y,z,a);
  }
  

  Here, x,y, and z denote the axis of rotation and its value lies between 0 and 1. a represents the angle of rotation and can be positive or negative.
• Scale3d(): Scale3d resizes the element in the 3D plane.

  .element{
        transform:scale3d(sx,sy,sz);
  }
  

  where sx,sy, and sz represent how much scaling is to be done.

2. Perspective:

Perspective gives the distance between the object and the z-axis thereby giving a realistic 3D effect to the object.
By default, Its value is 'none' and it takes any length as its value.
The lower the perspective value, the higher will be the 3D effect.

• Perspective-origin: It is defined as the point at which perspective property is applied to the object. This point is also known as the vanishing point.
• perspective and perspective() are different from each other. Check out this article to know more.
  https://codepen.io/Jayasree_0708/pen/XWjNqqb

3. Backface-visibility:

When an object is flipped, its backside appears as a mirror image of the front side. Backface-visibility allows us to hide the backside of the object.
It takes 2 values, hidden or visible and by default, its value is visible.

4. Preserve 3d:

It is one of the values of the transform-style property. It allows the child elements an object to retain its 3D effect.
Without preserve-3d, all the child elements of an object will be flattened out as a 2D object.

Check out how these properties affect objects 👇

Resources

• Transitions tool contains advanced ease functions that help in smoother transitions.
• Multi-step Transitions describes how to add multiple steps to a transition
  
• 3D transforms helps you to create 3D transformations easily.
  
• cubic bezier helps you to visualize and create complex movements of the object.

Thank you for reading 💖
Got anything to add? Comment section is all yours OR
Connect with me on Twitter or Github