Scribd
Upload
14 views

Part-20 Transform in CSS

Uploaded by

wordlkingplay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Part-20 Transform in CSS

Uploaded by

wordlkingplay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

@raju_webdev

Part-20
This is the Part-20 from our 'CSS Master'
Series. And in this part we will learn about:

What is transform in CSS?

Different CSS Transform properties

Example of CSS Transform property

visit geekshelp.in if
you want free PDF
and more stuff...

Geeks Help

@raju_webdev www.geekshelp.in
What is transform?
This property is used to apply 2D or 3D
transformation to an element.

This property allows us to rotate, scale,


move, skew, etc., HTML elements.

Now let's se
e some
transform
property
values...

@raju_webdev www.geekshelp.in
CSS Transform Values
none
This valued defines that there is no
transformation.

translate(x,y)
Defines a 2D translation.

translateX(x)
Defines a translation, using only the value for
the X-axis.

translateY(y)
Defines a translation, using only the value
for the Y-axis

scale(x,y)
Defines a 2D scale transformation.

scaleX(x)
Defines a scale transformation by giving a
value for the X-axis.

@raju_webdev www.geekshelp.in
scaleY(y)
Defines a scale transformation by giving a
value for the Y-axis.

skew(x-angle,y-angle)
Defines a 2D skew transformation along the
X- and the Y-axis.

skewX(angle)
Defines a 2D skew transformation along the
X-axis.

skewY(angle)
Defines a 2D skew transformation along the
Y-axis.

rotate(angle)
Defines a 2D rotation, the angle is specified
in the parameter.

rotateX(angle)
Defines a 3D rotation along the X-axis.

rotateY(angle)
Defines a 3D rotation along the Y-axis.

@raju_webdev www.geekshelp.in
Transform Example
Example: Output:

Output: Example:

Example: Output:

@raju_webdev www.geekshelp.in
Transform Example
Example:

Output:

For free HTML


Simplified PDF
register yourself
link in bio...

@raju_webdev www.geekshelp.in
DO YOU FIND IT
HELPFUL

@raju_webdev
I'm Raju, I will help you to provide
amazing content related to web
development and coding.

Geeks Help

www.geekshelp.in

You might also like