Part 4: Introduction to CSS3

Introduction

Welcome back to the "Introduction to CSS3" article series, you can check my previous articles here:

In this article, you'll learn about CSS3 transformation effects using CSS3 properties. We can also provide transformation effects using HTML5 canvas properties, you can check my previous article "HTML5 Canvas Advance: Part 2" in which I've used transformation properties in my examples.

What is the Transform?

A transform is an effect that allows you to make changes like position, shape, and size to an element. We can spin, scale, stretch, turn and move the elements using a CSS3 transform. It can be categorized into two main categories:

2D transforms
3D transforms

At present, 2D transforms have much more support to previous versions of browsers, whereas 3D transforms only support new browsers.

2D Transforms

There are many 2d transform methods that you'll learn in this article, like:

rotate
translate
skew
scale
matrix

Browser Support

i) rotate method

In CSS3, the "rotate" method rotates an element clockwise at a defined degree. It also allows negative values to rotate the element anti-clockwise. Before we check our example let's have a look at its syntax:

transform: rotate(value deg);
-webkit-transform: rotate(value deg); /* Safari and Chrome */
-ms-transform: rotate(value deg); /* IE 9 */

Here, we need the vendor prefixes for Explorer and Webkit (check here for Vendor Prefix detail). Here we have a rotate method in which we need to define a degree and will rotate depending on that element.

Example:

#noCss3 {
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
#rotate {
transform: rotate(-32deg);
-ms-transform: rotate(-32deg);
-moz-transform: rotate(-32deg);
-webkit-transform: rotate(-32deg);
-o-transform: rotate(-32deg);
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}

Output

ii) translate method

In CSS3, the translate method moves the element from its current position by providing the values to the parameter that holds the x-axis (left) and the y-axis (top) positions.

Example

#noCss3 {
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
#translate {
transform: translate(60px, 90px);
-ms-transform: translate(60px, 90px);
-moz-transform: translate(60px, 90px);
-webkit-transform: translate(60px, 90px);
-o-transform: translate(60px, 90px);
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}

Output

iii) skew method

In CSS3, the skew method tilts elements that depend on the parameters are given to the x-axis (horizontal) and the y-axis (vertical) lines. To tilt the element in the right direction provide a negative value and to tilt in the left direction provide positive value.

Example:

#noCss3 {
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
#skew {
transform: skew(35deg, 25deg);
-ms-transform: skew(35deg, 25deg);
-moz-transform: skew(35deg, 25deg);
-webkit-transform: skew(-50deg, 10deg);
-o-transform: skew(35deg, 25deg);
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
opacity:0.7;
}

Output

iv) scale method

In CSS3, the scale method increases or decreases the element size, it depends on the parameters given by you that include an x-axis (width) and y-axis (height). Check this example in which we increased the square width 3 times and the height 2 times from its original size using transform.

Example

#noCss3 {
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
#scale {
margin: 0 100px;
transform: scale(3, 2);
-ms-transform: scale(3, 2);
-moz-transform: scale(3, 2);
-webkit-transform: scale(2, 2);
-o-transform: scale(3, 2);
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
opacity: 0.5;
}

Output

v) matrix method

This is one of the best properties so far because the matrix method allows you to use all the 2D transform methods in one, it combines them. This method has six parameters that contain some mathematical functions, that allow you to move, scale, skew and rotate elements.

Example

#noCss3 {
border: 2px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
}
#matrix {
margin: 100px 0;
transform: matrix(0.6, 0,4, 0.5, 0.6, 0.3,0.3);
-ms-transform: rotate(-32deg);
-moz-transform: rotate(-32deg);
-webkit-transform: matrix(1.5,1.5,-0.4,2.5,0,0);
border: 3px solid green;
background: #b6ff00;
width: 150px;
height: 75px;
opacity: 0.6;
}

Output

Part 4: Introduction to CSS3 - 2d Transform

Reactions

Comments

Introduction

What is the Transform?

2D Transforms

i) rotate method

ii) translate method

iii) skew method

iv) scale method

v) matrix method