Transforms
This lesson discusses the transform property in CSS and how it can be used to apply transformations to elements on a web page.
Transforms
The transform property is used to apply transformations to elements
in CSS. Transformations can be used to rotate, scale, skew, or move
elements on a web page. The transform property can be used with
different values to apply different types of transformations.
Scale
The scale value is used to scale an element. The scale value can be
set to a specific size, such as 1.5 or 0.5, to scale the element up
or down.
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
The code above shows an example of the transform property with a value
of scale. In this example, the scale value of the <div> elements is
set to 1.5, 0.5, and 2, creating different scale effects for the
elements.
Rotate
The rotate value is used to rotate an element. The rotate value can
be set to a specific angle, such as 45deg or 90deg, to rotate the
element.
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
The code above shows an example of the transform property with a value
of rotate. In this example, the rotate value of the <div> elements is
set to 45deg, 90deg, and 180deg, creating different rotate effects
for the elements.
Skew
The skew value is used to skew an element. The skew value can be set
to a specific angle, such as 30deg or -30deg, to skew the element.
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
The code above shows an example of the transform property with a value
of skew. In this example, the skew value of the <div> elements is set
to 30deg, -30deg, and 45deg, creating different skew effects for the
elements.
Translate
The translate value is used to move an element. The translate value can
be set to a specific distance, such as 10px or -10px, to move the
element.
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
The code above shows an example of the transform property with a value
of translate. In this example, the translate value of the <div> elements
is set to 10px, -10px, and 20px, creating different translate effects
for the elements.
Origin
The transform-origin property is used to set the origin of the
transformed element. The origin value can be set to a specific position,
such as top left, center, or bottom right, to change the origin of
the transformation.
<div class="container">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item item3">Item 3</div>
</div>
The code above shows an example of the transform-origin property. In this
example, the origin of the transformation of the <div> elements is set to
top left, center, and bottom right, creating different origin effects
for the elements.