CSS Introduction

CSS Tutorial What is CSS CSS Syntax CSS Selector How to include CSS CSS Comments

CSS Attributes

CSS Background CSS Border CSS Display CSS Float CSS Font CSS Color CSS Hover CSS Important CSS Line-height CSS Margin CSS Opacity CSS Filter CSS Images CSS Overflow CSS Padding CSS Position CSS Vertical align CSS White space CSS Width Word-wrap in CSS Box-shadow in CSS Text-transform in CSS CSS Outline CSS Visibility CSS Counters CSS Clear fix CSS Icons CSS Justify-content Text-decoration in CSS CSS Lists CSS nth selector CSS Sticky CSS Background-clip CSS Checkbox-style CSS Letter-spacing CSS Navigation bar CSS Overlay CSS Root CSS Specificity CSS Text-indent CSS Text-stroke CSS Zoom CSS Order CSS Descendent selector CSS Clip CSS calc() CSS Background-blend-mode CSS radio-button CSS Superscript and subscript CSS Text-effects CSS Text-align CSS Variables CSS Page-break-before CSS Page-break-inside CSS Page-break-after CSS Content property CSS Word-spacing CSS Animation CSS @keyframes rules CSS Pseudo-classes CSS Pseudo-elements CSS Radial-gradient CSS Translate CSS Gradients CSS z-index CSS Loaders CSS Units CSS Transition CSS Masking CSS Arrow CSS Pagination

Misc

What is Bootstrap CSS What is CSS used for Difference between HTML and CSS How to center a table in CSS What is a CSS File How to center a button in CSS How to change background color in CSS How to change the font in CSS How to change font size in CSS How to resize an image in CSS How to get rid of bullet pioints in CSS Is CSS a programming language Grid Vs Flexbox in CSS How to edit CSS in WordPress How to use google fonts in CSS

CSS 2d Transform

Transform property in CSS is used mainly for enhancing the effects and to animate the elements.

Transform is an effect that changes the shape, size and position of an element.

It helps to manipulate an element without interrupting the default document.

There are two types of transformation 2D and 3D. In this article we are going to learn about 2D transform property of CSS in detail.

2D - Transform Property

transform :

transform property is used inside <style> tag. Various functions like translate(), rotate(), scale() and skew() can be used using this property.

Syntax:

transform: method (values) ;

Example:

transform: rotate (20 deg) ;

Here, the function rotate () is used to rotate the element by 20 degrees.

transform-origin :

By default, the origin point of an element is centre. To change the origin point of the transformation there another property called as transform-origin.

CSS 2d Transform

Syntax:

transform-origin: values ;

Example:

transform-origin: left top;

Changes the origin of transformation to the left top of the element.

transform-origin: 30% 50%;

Changes the origin of x-axis by 30% and y-axis by 50%.

2D Transform Methods:

translate() method:

This method translates the element from one point to another.

There are three types of translate () methods:

  1. translate(x, y)
  2. translateX(n)
  3. translateY(n)

translate(x, y):

Translates the element along the x-axis and y-axis respectively.

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
#square{
width: 250px;
height: 150px;
background: orange;
margin: 50px 40px;
}
</style>
</head>
<body>
<h1>CSS Transform</h1>
<div id="square">Example for Transform property</div>
</body>
</html>
Before using translate(x,y):
CSS 2d Transform

Output after using translate(x.y):

CSS 2d Transform

translateX(n):

This method takes only x co-ordinate as a parameter and moves the element along x-axis.

Example:

<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
#square{
width: 250px;
height: 150px;
background: orange;
margin: 50px 40px;
transform: translateX(100px);
}
</style>
</head>
<body>
<h1>CSS Transform</h1>
<div id="square">Example for Transform property</div>
</body>
</html>

Output: Moves the square to 100px along x-axis

CSS 2d Transform

translateY(n):

This method takes only y co-ordinate as a parameter and moves the element along y-axis.

Example:

<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
#sqaure{
width: 250px;
height: 150px;
background: orange;
margin: 50px 40px;
transform: translateY(150px);
}
</style>
</head>
<body>
<h1>CSS Transform</h1>
<div id="square">Example for Transform property</div>
</body>
</html>

Output: Moves the square to 120px along y-axis

CSS 2d Transform

rotate() method:

The rotate() method rotates the element according to the given angle.

It can rotate the element clockwise or anti clockwise.

Syntax:

transform: rotate(angle);

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
#square{
width: 250px;
height: 150px;
background: skyblue;
margin: 50px 40px;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>CSS Transform Rotate</h1>
<div id="square">Example for Transform property</div>
</body>
</html>

Before rotation:

CSS 2d Transform

Output after using rotate(45):

CSS 2d Transform
  • To rotate the element anti clockwise, you can use negative angle:

Example:

transform: rotate(-60deg);

scale() method:

This method changes the size of an element according to its width and height.

There are three types of scale() methods:

  1. scale(x, y)
  2. scaleX(n)
  3. scaleY(n)

scale(x, y):

This CSS transform method takes the parameters as width and height and changes the size of that element accordingly.

Syntax:

transform: scale(x, y);

where, x and y increment the size of the element x times and y times, respective to the width and height.

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
#square{
width: 250px;
height: 150px;
background: green;
margin: 50px 40px;
transform: scale(2,2);
transform-origin: left top;
}
</style>
</head>
<body>
<h1>CSS Transform Scale</h1>
<div id="square">Example for Transform property</div>
</body>
</html>

Before using scale():

CSS 2d Transform

Output after using scale(x, y):

CSS 2d Transform

Here, the size of the square is incremented 2 times of its width and 2 times of its height. Also the transform-origin : left top; shifts the origin to the top left of the element thus facilitating the scaling inside the screen.

scaleX(n):

Increments the size of an element using the width.

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
#square{
width: 250px;
height: 150px;
background: green;
margin: 50px 40px;
transform: scaleX(3);
transform-origin: left top;
}
</style>
</head>
<body>
<h1>CSS Transform Scale</h1>
<div id="square">Example for Transform property</div>
</body>
</html>

Output:

CSS 2d Transform

Here the square element is scaled 3 times its width using scaleX(3).

scaleY(n):

Increments the size of an element using the height.

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
#square{
width: 250px;
height: 150px;
background: green;
margin: 50px 40px;
transform: scaleY(2);
transform-origin: left top;
}
</style>
</head>
<body>
<h1>CSS Transform Scale</h1>
<div id="square">Example for Transform property</div>
</body>
</html>

Output:

CSS 2d Transform

Here the square element is scaled 2 times its height using scaleY(2).

skew() method:

This transform method skews the element along the x-axis or y-axis according to its types:

  1. skewX(n)
  2. skewY(n)

skewX(angle):

This method is used to skew the element according to its X-axis.

Syntax:

transform: skewX(angle);

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
#square{
width: 250px;
height: 150px;
background: brown;
margin: 50px 40px;
transform: skewX(30deg);
}
</style>
</head>
<body>
<h1>CSS Transform Skew</h1>
<div id="square">Example for Transform property</div>
</body>
</html>

Before using skewX():

CSS 2d Transform

Output after using skewX():

CSS 2d Transform

Here the element is skewed by 30 degrees along the x-axis using skewX(30deg) method.

skewY():

This method is used to skew the element according to its Y-axis.

Syntax:
transform: skewY(angle);

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
#square{
width: 250px;
height: 150px;
background: brown;
margin: 50px 40px;
transform: skewY(30deg);
}
</style>
</head>
<body>
<h1>CSS Transform Skew</h1>
<div id="square">Example for Transform property</div>
</body>
</html>

Output:

CSS 2d Transform

Here the element is skewed by 30 degrees along the y-axis using skewY(30deg) method.

matrix() method:

matrix() method of CSS transform allows you to combine all the four methods i.e. translate(), skew(), rotate() and scale() together.

Syntax:

transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

Example:

<!DOCTYPE html>
<html>
<head>
<title>CSS Transform</title>
<style type="text/css">
body{
font-family: cursive;
}
#square{
width: 250px;
height: 150px;
background: brown;
margin: 50px 40px;
transform: matrix(1, -0.2, 0, 1, 0 ,0);
}
</style>
</head>
<body>
<h1>CSS Transform Skew</h1>
<div id="square">Example for Transform property</div>
</body>
</html>

Output:

CSS 2d Transform

2D Transform for Cross Browser:

CSS 2D transform property can be used for all types of browsers.

You have to use following prefixes before transform property for the respective browsers:

Prefix Browser name
-moz-transform: methodName(parameters) Mozilla Firefox
-webkit-transform: methodName(parameters) Google Chrome, Safari, Android, iPhone
-o-transform: methodName(parameters) Opera browser

So in this way we have studied the 2D Transform property of CSS and its various methods to create animated web pages.



ADVERTISEMENT
ADVERTISEMENT