CSSUIHTML

CSS Transform Guide Part 1

We use the transform feature mostly to create animations and sometimes to reposition certain elements. In this guide, we will examine three different methods of the transform property. These methods are translate, scale and rotate.

Translate

translate does a two-dimensional translation. Actually, this means repositioning your element based on its current position. Using this feature, you can move your elements wherever you want.

translate
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ut placeat perspiciatis culpa! Accusamus, itaque assumenda? Qui, cumque, eum eaque ratione eveniet necessitatibus odio, similique cum quas rem blanditiis numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel aliquam cupiditate vitae. Possimus, labore officiis! Officia non vitae totam, accusamus quasi consequuntur autem itaque laborum iure quisquam alias illo eveniet.
transform: translate(0px, 0px);transform: translateX(0px);transform: translateY(0px);

Scale

scale changes the size of your element according to the scale you give it. The default value of this property is 1. When you give 2, your element grows 100% with all the children it has. When you give 0.5, the size is reduced by 50%.

scale
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ut placeat perspiciatis culpa! Accusamus, itaque assumenda? Qui, cumque, eum eaque ratione eveniet necessitatibus odio, similique cum quas rem blanditiis numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel aliquam cupiditate vitae. Possimus, labore officiis! Officia non vitae totam, accusamus quasi consequuntur autem itaque laborum iure quisquam alias illo eveniet.
transform: scale(1);

You can also use the scale property separately for the X and Y planes. This is not an aesthetic way of resizing, however there are times when it is useful.

scale
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ut placeat perspiciatis culpa! Accusamus, itaque assumenda? Qui, cumque, eum eaque ratione eveniet necessitatibus odio, similique cum quas rem blanditiis numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel aliquam cupiditate vitae. Possimus, labore officiis! Officia non vitae totam, accusamus quasi consequuntur autem itaque laborum iure quisquam alias illo eveniet.
transform: scale(1);

Rotate

rotate lets you rotate your element. You can rotate your element using deg or turn unit. When we use the deg unit, 360 is the maximum value for our element to rotate 1 turn around itself. But by going above this number, we can rotate our element as many times as we want. When you use the turn unit, the value 1 is the maximum value for our element to rotate 1 turn.

rotate
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat ut placeat perspiciatis culpa! Accusamus, itaque assumenda? Qui, cumque, eum eaque ratione eveniet necessitatibus odio, similique cum quas rem blanditiis numquam? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel aliquam cupiditate vitae. Possimus, labore officiis! Officia non vitae totam, accusamus quasi consequuntur autem itaque laborum iure quisquam alias illo eveniet.
transform: rotate(0deg);


If this content helped you, you can buy me a coffee.
Related: SVG Path Commands

You can join the newsletter to be notified of awesome interactive articles and courses about software and design. You will receive at most a few emails per month.


+80

Join to our Supporters or Sponsors