CSS3 2D Transform
Next ❯3D Transform
Used to allow 2D transformation to an element to change their shape, size and position
- 2D is all about, playing with X-axis & Y-axis
- Here, We are using methods in
transform:Property
- turned_in_not2D Transform Methods
scale()scaleX()scaleY()
skew()skewX()skewY()
translate()translateX()translateY()
rotate()matrix()
- Alert: Below we are using limited values, you can use more values( +ve or -ve ) as per your need
Scale
It changes the size of the element
scaleX
X
scaleX(1);
#scalex {
/*transform:scaleX(X-axis_value);*/
transform:scaleX(1);
}
scaleXsubject
scaleXclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#scalex {
/*transform:scaleX(X-axis_value);*/
transform:scaleX(1);
height:100px;
width:100px;
background-color:#ef5195;
box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
<div id="scalex" style="margin:auto;">
<h5 style="text-align:center;">scaleX</h5>
</div>
</body>
</html>scaleY
Y
scaleY(1);
#scaley {
/*transform:scaleY(Y-axis_value);*/
transform:scaleY(1);
}
scaleYsubject
scaleYclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#scaley {
transform:scaleY(1);
height:100px;
width:100px;
background-color:#ffdd52;
box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
<div id="scaley" style="margin:auto;">
<h5 style="text-align:center;">scaleY</h5>
</div>
</body>
</html>scale
scaleX
scaleY
scale(1,1);
#scale {
/*transform:scale(scaleX, scaleY);*/
transform:scale(1,1);
}
scalesubject
scaleclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#scale {
/*transform:scale(scaleX, scaleY);*/
transform:scale(1,1);
height:100px;
width:100px;
background-color:#00ccc3;
box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
<div id="scale" style="margin:auto;">
<h5 style="text-align:center;">scale</h5>
</div>
</body>
</html>Skew
It changes the shape of the element
X
skewX(20deg);
#skewx {
/*transform:skewX(X-axis_degree);*/
transform:skewX(20deg);
}
skewXsubject
skewXclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#skewx {
transform:skewX(10deg);
height:100px;
width:100px;
background-color:#ef5195;
box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
<div id="skewx" style="margin:auto;">
<h5 style="text-align:center;">skewX</h5>
</div>
</body>
</html>Y
skewY(20deg);
#skewy {
/*transform:skewY(Y-axis_degree);*/
transform:skewY(20deg);
}
skewYsubject
skewYclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#skewy {
/*transform:skewY(Y-axis_degree);*/
transform:skewY(10deg);
height:100px;
width:100px;
background-color:#ffdd52;
box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
<div id="skewy" style="margin:auto;">
<h5 style="text-align:center;">skewY</h5>
</div>
</body>
</html>skewX
skewY
skew(20deg,20deg);
#skew {
/*transform:skew(skewX, skewY);*/
transform:skew(20deg,20deg);
}
skewsubject
skewclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#skew {
transform:skew(20deg,20deg);
height:100px;
width:100px;
background-color:#00ccc3;
box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
<div id="skew" style="margin:auto;">
<h5 style="text-align:center;">skew</h5>
</div>
</body>
</html>Translate
It changes the position of the element
- The values can be in pixels, %, or in other units
translateX
X
translateX(10px);
#translatex {
/*transform:translateX(x-axis-value);*/
transform:translateX(10px);
}
translateXsubject
translateXclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#translatex {
/*transform:translateX(x-axis-value);*/
transform:translateX(10px);
height:100px;
width:100px;
background-color:#ef5195;
box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
<div id="translatex" style="margin:auto;">
<h5 style="text-align:center;">translateX</h5>
</div>
</body>
</html>translateY
Y
translateY(10px);
#translatey {
/*transform:translateY(y-axis-value);*/
transform:translateY(10px);
}
translateYsubject
translateYclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#translatey {
/*transform:translateY(y-axis-value);*/
transform:translateY(10px);
height:100px;
width:100px;
background-color:#ffdd52;
box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
<div id="translatey" style="margin:auto;">
<h5 style="text-align:center;">translateY</h5>
</div>
</body>
</html>translate
translateX
translateY
translate(10px,10px);
#translate {
/*transform:translate(translateX,translateY);*/
transform:translate(10px,10px);
}
translatesubject
translateclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#translate {
/*transform:translate(translateX,translateY);*/
transform:translate(10px,10px);
height:100px;
width:100px;
background-color:#00ccc3;
box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
<div id="translate" style="margin:auto;">
<h5 style="text-align:center;">translate</h5>
</div>
</body>
</html>Rotate
It rotates the element at specific angle
rotate
rotate(10deg);
#rotate {
/*transform:rotate(In_degree);*/
transform:rotate(10deg);
}
rotatesubject
rotateclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#rotate {
transform:rotate(10deg);
height:100px;
width:100px;
background-color:#e95f73;
box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
<div id="rotate" style="margin:auto;">
<h5 style="text-align:center;">rotate</h5>
</div>
</body>
</html>Matrix
It combines all the 2D transform methods into one, which allows you to rotate, resize, reposition, reshape the element
scaleX
skewY
skewX
scaleY
translateX
translateY
matrix(1, -0.2, 0, 1, 0, 0);
#matrix {
/*transform:matrix(scaleX,skewY,skewX,scaleY,translateX,translateY);*/
transform:matrix(1, -0.2, 0, 1, 0, 0);
}matrixsubject
matrixclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
#matrix {
/*transform:matrix(scaleX,skewY,skewX,scaleY,translateX,translateY);*/
transform:matrix(1, -0.2, 0, 1, 0, 0);
height:100px;
width:100px;
background-color:#3ba8df;
box-shadow: 0 1px 2px #040404;
}
</style>
</head>
<body>
<div id="matrix" style="margin:auto;">
<h5 style="text-align:center;">matrix</h5>
</div>
</body>
</html>- You can add more than one transform method at once
/*Syntax- To add more than 1 transform method */
transform:method1 method2 ...;Example:
/* means rotate 30deg first, then translate 50px to y-axis and then scale to 1.5*/
transform:rotate(30deg) translateY(50px) scale(1.5);
/* means translate 20px to X-axis, then again translate 30px to X-axis */
transform:translateX(20px) translateX(30px);
❮ Prev CSS3 Opacity
Next ❯3D Transform
So,