All Categories

Introduction To CSS3 2D Transforms

CSS3 2D transforms are used to re-change the element structure as translate, rotate, scale, and skew. You can view our more examples in our GitHub repo   https://github.com/somacadgild/Css.git

2D transformation methods:

  • translate()

  • rotate()

  • scale()

  • skewX()

  • skewY()

  • matrix()

Now, lets look into how to rotate a div 30 degrees by using a rotate() method.

1. The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

Box rotation with 30 degrees angle as shown below

<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: #F15A29;
border: 1px solid #fff;
}
div#rotate_div {
transform: rotate(30deg);
}
</style>
</head>
<body>
<div>
This is a original div.
</div>
<div id="rotate_div">
Div after rotating 30deg.
</div>
</body>
</html>

The output of the above code will be:

css3 box rotation

  • Box rotation with -40 degrees angle as shown below:
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: #F15A29;
border: 1px solid #fff;
}
div#rotate_div {
transform: rotate(-40deg);
}
</style>
</head>
<body>
<div>
This is a original div.
</div>
<div id="rotate_div">
Div after rotating -40deg.
</div>
</body>
</html>

output:

css3 rotation

2. translate() method:

The translate() method moves an element from its current position. This div element can be moved to the right, left, down from its current position depending on the requirement.

Syntax:

transform: translate(40px,100px);

The div will be moved 40px right and 100px down from its original position.

3. scale() method:

The scale() method increases or decreases the size of an element.

Syntax:transform: scale(2,3);

Android Programming

4. The skewX() Method

The skewX() method skews an element along the X-axis by the given angle.

The following example skews the <div> element 15 degrees along the X-axis:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 80px;
background-color: #F15A29;
border: 1px solid black;
}
div#skew_div {
transform: skewX(15deg);
}
</style>
</head>
<body>
<div>
div element.
</div>
<div id="skew_div">
This div element is skewed 15 degrees along the X-axis.
</div>
</body>
</html>

The output will be as shown below.

css3 rotation

5.The skewY() Method

The skewY() method skews an element along the Y-axis by the given angle.

The following example skews the <div> element 15 degrees along the Y-axis:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 80px;
background-color: #F15A29;
border: 1px solid black;
}
div#skew_div {
transform: skewY(15deg);
}
</style>
</head>
<body>
<div>
div element.
</div>
<div id="skew_div">
This div element is skewed 15 degrees along the Y-axis.
</div>
</body>
</html>

The output will be:

css3 rotation

6.The skew() Method

The skew() method skews an element along the X and Y-axis by the given angles.

The following example skews the <div> element 20 degrees along the X-axis, and 10 degrees along the Y-axis:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 80px;
background-color: #F15A29;
border: 1px solid black;
}
div#skew_div {
transform: skew(15deg,20deg);
}
</style>
</head>
<body>
<div>
div element.
</div>
<div id="skew_div">
This div element is skewed 15degrees along the X-axis and 20degrees along Y-axis.
</div>
</body>
</html>

The output will be:

css3 rotation

7.The matrix() method combines all the 2D transform methods into one.

The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()):

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 80px;
background-color: #F15A29;
border: 1px solid black;
}
div#skew_div {
transform: matrix(1, 0, 0.5, 1, 150, 0);
}
</style>
</head>
<body>
<div>
div element.
</div>
<div id="skew_div">
This div element after matrix transform.
</div>
</body>
</html>

The output will be:

css3 rotation
 
8. Let’s see one important effect using Image with text overlay Scale use
 

<div class="container">
<img src="" alt="">
<div class="textbox">
<p class="text">TEXT</p>
</div>
</div>
.container {
position:relative;
overflow:hidden;
}
.container .textbox {
width:200px;
height:150px;
position:absolute;
top:0;
left:0;
margin-top:-160px;
border-radius:5px;
background-color: rgba(0,0,0,0.75);
-webkit-box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
box-shadow: inset 0px 0px 5px 2px rgba(255,255,255,.75);
}
.container:hover .textbox {
margin-top:0;
}
.text {
padding-top: 50px;
}
.textbox {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}

 

Conclusion:

I hope you have learnt all the 2D transformation in our next blog we will be disscussing about 3D transformation. If you have any query do write us at [email protected].

Keep visiting our site www.acadgild.com for more updates on Frontend and other technologies.

AngularJS course details

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Articles

Close