This property is use to the change the shape and size and position of any element on the web-page. It transforms the elements along the X-axis and Y-axis is knows as CSS 2D Transform. There are 6 Main transform method.
- translate()
- rotate()
- scale()
- skewX()
- skewY()
- matrix()
Transition property
This property is use to change effects of any element smoothly according to specified duration.
- Transition-timing-function.
This property specified the speed curved of the transition effect.
a. Ease.
b. Learner.
c. Ease-in.
d. Ease-out.
e. Ease-in-out. - Transition-delay:30s;
- Transition-duration:50s;
Translate()
This method is use to move any element from one place to another place is knows as Translate.
Example
<html>
<head>
<title>2D Transform</title>
<style>
.why {
font-size: 35px;
margin: 25px 0;
margin-left: 100px;
}
img {
border: 1px solid black;
transition-duration: 3s;
-webkit-transition-duration: 3s;
}
img:hover {
transform: translate(100px, 100px);
-ms-transform: translate(100px, 100px);
-webkit-transform: translate(100px, 100px);
}
</style>
</head>
<body>
<div class="why">Translate() Method</div>
<img src="https://tse3.mm.bing.net/th?id=OIP.JrigS3USw8GO8CS0DvN-KwHaE8&pid=Api&P=0"alt="GFG" />
</body>
</html>
Rotate()
This method is use to rotate any element clock wise or anti-clock wise according to the specified degree is knows as Rotate().
Example
<html>
<head>
<style>
img {
border: 5px solid green;
}
img:hover {
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
.why {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="why">Rotation() Method</div>
<img src="https://tse2.mm.bing.net/th?id=OIP.2r4zmvwrDa3lV5otsV4y9wHaLH&pid=Api&P=0" alt="GFG" />
</body>
</html>
Scale ()
This method is use to increased or decreased the size of element is knows as Scale().
Example
<html>
<head>
<style>
img {
border: 5px solid green;
}
img:hover {
-ms-transform: scale(1, 2);
-webkit-transform: scale(1, 1);
transform: scale(1, 2);
}
.why {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="why">Scale() Method</div>
<img src="http://parisnajd.com/backgd/data/media/2/1600FG100_2_038.jpg"alt="GFG" />
</body>
</html>SkewX()
This method is use to increased or decreased X axis of element is knows as SkewX().
Example
<html>
<head>
<style>
img {
border: 5px solid green;
}
img:hover {
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
transform: skewX(20deg);
}
.why {
font-size: 25px;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="why">skewX() Method</div>
<img src="https://tse1.mm.bing.net/th?id=OIP.i2iwkFKSIuUvxXMNixsjLwHaFj&pid=Api&P=0"alt="GFG" />
</body>
</html>
SkewY()
This method is use to increased or decreased Y axis of element is knows as SkewY().
Example
<html>
<head>
<style>
img {
border: 5px solid green;
}
img:hover {
-ms-transform: skewY(20deg);
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
}
.why {
font-size: 25px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="why">skewY() Method</div>
<img src="https://i.ytimg.com/vi/HUpPEx9X0P4/maxresdefault.jpg"alt="GFG" />
</body>
</html>Matrix
Matrix method combines all the 2D transform property into a single property is knows as Matrix. The six parameters as matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ).
Example
<html>
<head>
<style>
img {
border: 5px solid green;
}
img:hover {
-ms-transform: matrix(1, -0.3, 0, 1, 0, 0);
-webkit-transform: matrix(1, -0.3, 0, 1, 0, 0);
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
.why {
font-size: 35px;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="why">matrix() Method</div>
<img src="http://1.bp.blogspot.com/-p0vkZIAIcbk/VRDd8toj_pI/AAAAAAAA54U/ukF_9s3cMXI/s1600/shonephotography-037.jpg"alt="GFG" />
</body>
</html>
CSS 3D Transform
3D transformation the elements are rotated along three direction such as X-axis, Y-axis and Z-axis is knows as CSS 3D transform.
Three type of main Transformation
- rotateX()
Example
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: red;
border: 5px solid blue;
}
div#why {
-webkit-transform: rotateX(150deg);
transform: rotateX(150deg);
}
</style>
</head>
<body>
<div>
hello student how are you
</div>
<p>Rotate X-axis</p>
<div id = "why">
hello student how are you
</div>
</body>
</html>
- rotateY()
Example
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color:red;
border: 5px solid green;
}
div#why {
-webkit-transform: rotateY(150deg);
transform: rotateY(150deg);
}
</style>
</head>
<body>
<div>
hello student how are you
</div>
<p>Rotate Y axis</p>
<div id = "why">
hello student how are you
</div>
</body>
</html>
- rotateZ()
Example
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: red;
border: 5px solid green;
}
div#zDiv {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<div>
hello student how are you
</div>
<p>rotate Z axis</p>
<div id = "zDiv">
hello student how are you
</div>
</body>
</html>
If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below for the audience. See you guys in another article.
To know more about CSS 2D please check Wikipedia Click here.
Stay Connected Stay Safe. Thank you
0 Comments