Course Content

If you are facing any issue in playing video please use Firefox browser.

Course Content

Description

What Is Transforms And How To Use It In CSS3?

Transform has different properties like translate, scale, rotate and skew. We can change the position of something in CSS, change the scale, and rotate any division and much more using transform. First we will define transform, and its functions. What are functions ? Function can be translate, scale, rotate and skew.

Translate means to move something from one place to another.

Scale means to increase scale area.

Rotate means to rotate something as it name suggests.

Skew means to bend over something.

Let’s see Example :
<div class= “image_main”>
                <img src= “imag_name.jpg”>
                <div class= “img hover”>
                                <a href= “#”> hover div</a>
</div>

In CSS write following code :
.img_hover a {top: 50%; left:50%; position: absolute;}

Here you can see, the position is at 50% at top and left but it is not in center because it defined top from top edge and left is also defined from left edge. Now using transform, we will make it in center.
.img_hover a {top: 50%; left:50%; position: absolute; transform: translate(-50%);}

This will move it 50% so as to be in center. You can define translate of your choice like from top, bottom or right side. To move in x,y both direction, type transform:translate(-50%, -50%);}.

To stop the transform on display :
.img_hover a {top: 50%; left:50%; position: absolute; transform: translate (-50%, -50%); display: block)}

Now to rotate it change code as per below :
.img_hover a {top: 50%; left:50%; position: absolute; transform: rotate(90deg);display: block)}

To skew the content, type command as below :
.img_hover a {top: 50%; left:50%; position: absolute; transform: skew(10deg);display: block)}

To see skew in scale, we will remove background from img hover command and see the effect.

Now, to scale the image while hovering on it write command :
.img_main:hover img{transform: scale(1.1)} (this will scale image 10% from its original size)

Now, to increase/decrease the size of image by effects then :
.img_main:hover img{transform: scale(1.1)}; transition: all .3s eas-in-out;}

In this you will see, image is changing slowly with effects. This way, you can use transform and transition in CSS3.

FAQs

Recommended Courses

Share With Friend

Have a friend to whom you would want to share this course?

Download The Apps

Code Scan or Download the app
Google Play Store
297K+ Downloads
4.5 Rating
10K+ Reviews
  • Learn anywhere on the go
  • Get regular updates about your enrolled or new courses
  • Share content with your friends
  • Evaluate your progress through practice tests
  • No internet connection needed
  • Enroll for the webinar and join at the time of the webinar from anywhere