CSS3 2D Transforms

CSS3 transforms will allow you to change element's shape, size and position. Transformations that you can achieve using 2D transform are:

translate()

The translate() method will allow you to move an element from its current position (according to the parameters given for the X-axis and the Y-axis).

/*transform: translate(x-displacement , y-displacement);*/
-webkit-transform: translate(50px, 100px);
-ms-transform: translate(50px, 100px);
transform: translate(50px, 100px);

CSS

You can also break transfrom into transformX() and transformY().

Example!

rotate()

The rotate() method will allow you to rotate an element clockwise or counter-clockwise according to a given degree.

/* + degree is clockwise */
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);

CSS

/* - degree is anit-clockwise */
-ms-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);

CSS

Example!

scale()

The scale() method will allow you to increase or decrease the size of an element (according to the parameters given for the width and height).

/* scale(x-axis, y-axis) */
-ms-transform: scale(2, 3);
-webkit-transform: scale(2, 3);
transform: scale(2, 3);

CSS

Example!

skew()

The skew() method will allow you to skew an element along the X and Y-axis by the given angles.

/* skew(x-axis, y-axis) */
-ms-transform: skew(20deg, 10deg);
-webkit-transform: skew(20deg, 10deg);
transform: skew(20deg, 10deg);

CSS

You can also break skew into skewX() and skewY()/

Example!

matrix()

The matrix() method will allow you to combines all the 2D transform methods into one. The parameters are as follow:
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY());

/* matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY()); */
-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);

CSS

CSS3 3D Transform

3D-tranform can let you change the orientation of the element in the 3-dimensional plane.

CSS3 Transitions

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration.

Transitions allow you to define transition between two states of an element.

To create a transition effect, you must specify two things:

• the CSS property you want to add an effect to
• the duration of the effect

div {
	width: 20px;
	height: 30px;
	-webkit-transition: width 2s, height 4s;
	transition: width 2s, height 4s;
}
div:hover {
	width: 200px;
	height: 300px;
}

CSS

Example!

Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

Delay

The transition-delay property specifies a delay (in seconds) for the transition effect.

						-webkit-transition-delay: 1s;
						transition-delay: 1s;

CSS

CSS3 Animations

CSS3 animation properties allows you to animate most HTML elements without using JavaScript or Flash!

animation-name and animation-duration

We need to give our animation a name to refer to it later from the keyframe rule. We also need to specify the animation-duration property, else the animation won't have any effect because it's default value is 0.

But, to use CSS3 animation, you must first specify some keyframes for the animation.
Keyframe rule specifies the animation code.

@keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.

You can specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

@keyframes example {
	from {background-color: red;}
	to {background-color: yellow;}
}

div {
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
}

CSS

@keyframes example {
	0%   {background-color: red;}
	25%  {background-color: yellow;}
	50%  {background-color: blue;}
	100% {background-color: green;}
}

div {
	width: 100px;
	height: 100px;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
}

CSS

See here! See here!

animation-delay

The animation-delay property specifies a delay for the start of an animation.

animation-iteration-count

The animation-iteration-count property specifies the number of times an animation should run.

animation-direction

The animation-direction property is used to let an animation run in reverse direction or alternate cycles.

div {
	width: 100px;
	height: 100px;
	background-color: red;
	animation-name: example;
	animation-duration: 4s;
	animation-iteration-count: 3;
	animation-direction: alternate;
}

Speed Curve of the Animation

The animation-timing-function property specifies the speed curve of the transition effect.