BlogsDope image BlogsDope

Animate your Website Elements with CSS Transforms

May 27, 2017 HTML CSS ANIMATION 2194

We all are naturally attracted to moving objects and unusual orientations. Animation effects are either used to improve user interface or to draw user's attention to important parts of project.

In this post, I will be showing you how to apply different transformations to improve the usability and design of your website.

CSS Transforms

You can add effects to your website elements by transforming them in many different ways using a CSS property transform. This property allows you to rotate, scale, move and skew elements by using various transform functions. You can also trigger these transformations on mouse hover or mouse click. I will be covering three-dimensional transforms in a future post.

Let's have a look at each of these transform property functions.

scale

The scale function allows you to increase or decrease the size of an element i.e. scale the element by a factor.

For example, a factor 2 would transform the size of the element to 2 times of its original size. Similarly, a factor 0.4 would transform its size to 0.4 times of its original one.

Let's take an image of dimension 200 * 200.

HTML

<img src="pic.jpg" class="element" width="200" height="200">

The image is assigned a class named 'element'.

To make the image 1.5 times larger, we will use the scale function of the transform property.

CSS

.element:hover {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}

The above code will increase both the width and the height of the image to 1.5 times its original ones on hovering over the image since we passed 1.5 as an argument to the scale function. Notice that the transform property is given the vendor prefixes -webkit--moz- and -o-. These are given to gain the best support across all the browsers.

To make the transformation smooth, use the transition property.

CSS

.element{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.element:hover {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}						

This transition property will make the transformation occur linearly for a duration of 0.2 s. Hover over the following image to see the live demo of this transformation.

transform:scale

To be more specific, you can use scaleX and scaleY values for scaling the width and height of the element respectively.

HTML

<img src="pic.jpg" class="scale1" width="200" height="200">
<img src="pic.jpg" class="scale2" width="200" height="200">

CSS

.scale1{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.scale1:hover {
	-webkit-transform: scaleX(1.2);
	-moz-transform: scaleX(1.2);
	-o-transform: scaleX(1.2);
	transform: scaleX(1.2);
}

.scale2{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.scale2:hover {
	-webkit-transform: scaleY(.8);
	-moz-transform: scaleY(.8);
	-o-transform: scaleY(.8);
	transform: scaleY(.8);
}

On hovering over the respective images, the width of the first image having class 'scale1' will be increased to 1.2 times its original width and the heigth of the second image having class 'scale2' will be decreased to 0.8 times its original height. Try hovering over the following images.

transform:scaleX
transform:scaleY

Now, consider the case where you want to increase the width to 1.2 times and decrease the height to 0.8 times of the original value of an element at the same time. For that, you have to give two values to the scale function separated by comma. The first value will scale its width and the second its height.

CSS

.element{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.element:hover {
	-webkit-transform: scale(1.2, .8);
	-moz-transform: scale(1.2, .8);
	-o-transform: scale(1.2, .8);
	transform: scale(1.2, .8);
}

This transformation is shown below.

combined scaleX and scaleY

You can also scale other CSS properties like padding and font-size.

rotate

This is another function of the transform property. Using this function, you can rotate your element by whatever angle in whichever direction you want. A positive value will rotate an element clockwise and a negative value will rotate it counterclockwise.

Let's try to rotate an image by some angle, although you can rotate almost anything like div, span, headings or paragraphs. You can also try rotating the whole html body. Sounds weird? Just try it out.

HTML

<img src="pic.jpg" class="rotate1">
<img src="pic.jpg" class="rotate2">

CSS

/* first image */
.rotate1{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.rotate1:hover {
	-webkit-transform: rotate(40deg);
	-moz-transform: rotate(40deg);
	-o-transform: rotate(40deg);
	transform: rotate(40deg);
}

/* second image */
.rotate2{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.rotate2:hover {
	-webkit-transform: rotate(-40deg);
	-moz-transform: rotate(-40deg);
	-o-transform: rotate(-40deg);
	transform: rotate(-40deg);
}

The first image will get rotated by 40 degrees clockwise and the second image by 40 degrees counterclockwise on hovering over them as shown in the following demo.

transform:rotate(40deg)
transform:rotate(-40deg)

By default, the rotate function rotates an element along Z axis. You can specifically rotate the element along X, Y and Z axis using the functions rotateXrotateY and rotateZ respectively. Let's see how.

HTML

<img src="pic.jpg" class="rotate1">
<img src="pic.jpg" class="rotate2">
<img src="pic.jpg" class="rotate3">

CSS

/* first image */
.rotate1{
	-webkit-transition: transform 1s linear;
	-moz-transition: transform 1s linear;
	-o-transition: transform 1s linear;
	transition: transform 1s linear;
}

.rotate1:hover {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
}

/* second image */
.rotate2{
	-webkit-transition: transform 1s linear;
	-moz-transition: transform 1s linear;
	-o-transition: transform 1s linear;
	transition: transform 1s linear;
}

.rotate2:hover {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}

/* third image */
.rotate3{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.rotate3:hover {
	-webkit-transform: rotateZ(40deg);
	-moz-transform: rotateZ(40deg);
	-o-transform: rotateZ(40deg);
	transform: rotateZ(40deg);
}
transform:rotateX
transform:rotateY
transform:rotateZ

The first and the second smileys get rotated by 180 degrees along X and Y axis respectively. The third smiley gets rotated by 40 degrees along Z axis which is also the default axis of rotation.

You can make many new combinations by combining these transformations. Now, let's move to another transform function.

translate

You can move an element in horizontal, vertical or in any other direction using the translate function. It only changes the position of the element on which it is applied without interrupting the normal flow of the document.

translateX is used to move your element horizontally. Giving a positive value will move it to the right and a negative value to the left. translateY will move your element in the vertical direction. Again, a positive value will move it down and a negative value up.

HTML

<img src="pic.jpg" class="translate1">
<img src="pic.jpg" class="translate2">

CSS

/* first image */
.translate1{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.translate1:hover {
	-webkit-transform: translateX(40px);
	-moz-transform: translateX(40px);
	-o-transform: translateX(40px);
	transform: translateX(40px);
}

/* second image */
.rotate2{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.rotate2:hover {
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	-o-transform: translateY(20px);
	transform: translateY(20px);
}
transform:translateX
transform:translateY

The first image is moved 40px to the right using the translateX function and the second image 20px down using the translateY value. You can also move the same element horizontally as well as vertically simultaneously. For that, you have to pass two arguments to the translate function separated by comma. The first value will move the element horizontally whereas the second one will move it vertically.

HTML

<img src="pic.jpg" class="translate1">

CSS

.translate1{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.translate1:hover {
	-webkit-transform: translate(40px,20px);
	-moz-transform: translate(40px,20px);
	-o-transform: translate(40px,20px);
	transform: translate(40px,20px);
}
transform:translate

The above image is following a path on hovering in which the final position is 40px to the right and 20px below the initial position.

skew

The skew function distorts any element on the horizontal or the vertical axis. Like all the other transform functions, here also we have separate skewX and skewYfunctions to distort the element along X and Y axis respectively.

Let's try horizontal and vertical skew effects on two separate div.

HTML

<div class="skew1"></div>
<div class="skew2"></div>

CSS

.skew1, .skew2{
	width:170px;
	height:80px;
	background-color:#FFDE40;
}

The width, height and background color are added for both the div in the above code. Now, let's proceed to add further CSS to skew the two div.

CSS

/* first div */
.skew1{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.skew1:hover {
	-webkit-transform: skewX(20deg);
	-moz-transform: skewX(20deg);
	-o-transform: skewX(20deg);
	transform: skewX(20deg);
}

/* second div */
.skew2{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.skew2:hover {
	-webkit-transform: skewY(20deg);
	-moz-transform: skewY(20deg);
	-o-transform: skewY(20deg);
	transform: skewY(20deg);
}

Hover over the above div. The first div will skew 20 degrees horizontally and the second one will skew 20 degrees vertically.

You can also skew an element horizontally as well as vertically by passing two values to skew, the first one will skew it horizontally and the second one vertically.

HTML

<div class="skew1"></div>

CSS

.skew1{
	width:170px;
	height:80px;
	background-color:#FFDE40;
}

.skew1{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.skew1:hover {
	-webkit-transform: skew(20deg, 10deg);
	-moz-transform: skew(20deg, 10deg);
	-o-transform: skew(20deg, 10deg);
	transform: skew(20deg, 10deg);
}

The above div skews 20 degrees horizontally and 10 degrees vertically on hovering over it.

Now let's combine multiple transforms

For this, you just have to write all the transforms you have to apply to your element and you are done. Let's take an example where you want to scale up an image to 1.2 times its original size and rotate it by 10 degrees at the same time.

HTML

<img src="pic.jpg" class="element" width="200" height="200">

CSS

.element{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.element:hover {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	transform: scale(1.2);

	-webkit-transform: rotate(10deg);
	-moz-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	transform: rotate(10deg);
}

You can also define these transform values at the same time as shown below. Check out the demo and try making more such combinations.

CSS

.element{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.element:hover {
	-webkit-transform: scale(1.2) rotate(10deg);
	-moz-transform: scale(1.2) rotate(10deg);
	-o-transform: scale(1.2) rotate(10deg);
	transform: scale(1.2) rotate(10deg);
}
multiple transforms

So, these were the four main functions of the transform property. There are two more functions viz. perspective and matrix.

perspective

It defines a perspective view so that the three dimensional transforms work. Since it includes three dimensional transformations, we will be covering it in a future post on 3D Transformations.

matrix

I don't personally recommend writing matrix value by hand, since there are other online tools which will generate matrix for you. Basically, matrix is used to combine all transforms applied to an element. In other words, you can write a matrix in place of one or more transforms applied to an element.

For example,

CSS

.element:hover {
	transform: scale(1.2) rotate(10deg);
}

The above code can be written in the form of matrix as follows.

CSS

.element:hover {
	transform: matrix(0.787846, 0.138919, -0.138919, 0.787846, 0, 0)
}

Browser Support

This property is supported by all the browsers except Opera Mini. Also, IE does not support the transform-style: preserve-3d property, thus preventing nesting of 3D transformed elements.

Conclusion

Little animated transformations in the position and orientation of various website elements can bring life into your website design, if applied appropriately. This was just a post on introduction and basic usage of different types of transformations. These can be used to create really amazing effects and animations that I will keep covering in my future posts.

Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
0 COMMENT

Please login to view or add comment(s).