Home » Featured » CSS3 Transitions And Transformations – Updated

CSS3 Transitions And Transformations – Updated

Improve your css3 skills and build your applications and content with perfect rich user interface, which can make your project more appealing and easy to use. With CSS3 you can forget about Java for animating elements and CSS properties like border and width. This post covers 2D Transformations on HTML elements with CSS3, using Matrix 2D transformations in CSS3, move elements with CSS3, more advanced animations in CSS3, applying 3D transformations in CSS3.

feat

1. Applying simple 2D transformations on HTML elements with CSS3

With CSS3, you now have the capability to perform several transformations, in two-dimensional (2D) space, on your document elements, in a very simple way—without relying on any external technology. In this solution, you’ll see how you can rotate, skew, scale, and translate HTML elements with the single use of the CSS 2D Transforms Module.

#element {
transform: rotate(45deg); /* This rotates the targeted element 45 degrees clockwise. */
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

You also can transform an element on only one axis by using the following syntax:

transform:scaleX(X scale factor);
transform:scaleY(Y scale factor);

Here’s an example:

#element{
transform: scale(2,4);
}

/* or */

#element{
transform: scaleY(2);
}

/* or */

#element{
transform: scaleX(2);
}

Skewing an element:

#element{
transform: skew(25deg,20deg);
}

/* or */

#element{
transform: skewY(25deg);
}

/* or */

#element{
transform: skewX(25deg);
}

Translating an element:

#element{
transform: translate(10px,40px);
}

You can also apply several transformations on the same element by writing the transform functions one
after another, separated by a space, like this:

transform: rotate(45deg) scale(2);

Transform Origin:

Every element is positioned in a 2D coordinate space, and they each have an origin point. You can move this origin when performing any transformation by using the transform-origin property. The coordinates of this point are based on a regular 2D coordinate system: a vertical Y axis, a horizontal X axis, and an initial transform-origin value of 50% 50 %, which is the center of the element.

The default value can be then expressed like this: (50 %,50 %) or (center,center).

#element{
transform: scale(0.5);
transform-origin: 20px 40px;
}

Using Matrix 2D Transformations

You can apply combined transformations with a single function by using matrices.

The matrix transform function in CSS3 has the following syntax and is equal to applying the transformation
matrix [a b c d e f]:

#element{
transform: matrix(a, c, b, d, e, f);

How It Works:

Create a simple HTML5 document with your usual text editor, with a figure element containing an image and its legend:

<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Solution 9.2</title>
</head>
<body>
<figure id="image-wrap">
<img src="photo.jpg" />
<figcaption>This is going upside down !!</figcaption>
</figure>
</body>
</html>

That’s about it for the HTML part. Now create your style sheet, and name it style.css. First take care of the matrix transformation for all browsers compliant with the CSS3 transforms module:

#image-wrap{
-moz-transform:matrix(1,0,0,-1,0,0);
-o-transform:matrix(1,0,0,-1,0,0);
-webkit-transform: matrix(1,0,0,-1,0,0);
-ms-transform: matrix(1,0,0,-1,0,0);
transform:matrix(1,0,0,-1,0,0);

/* Now apply the same effect for Internet Explorer 8 and earlier by using the Matrix filter: */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1,
M12=0,
M21=0,
M22=-1,
SizingMethod='auto expand');
}

Moving Elements Using CSS3 Transitions

One other great feature of CSS3 is the capability to add smooth transitions between two rendering states of an element and obtain very nice animation effects without using any JavaScript or external plug-ins. In this solution, you’ll see how to use transitions and create some pretty cool effects directly within your style sheet.

CSS properties that can be animated:
background-color
background-image
background-position
border-bottom-color
border-bottom-width
border-color
border-left-color
border-left-width
border-right-color
border-right-width
border-spacing
border-top-color
border-top-width
border-width
bottom length
color
crop
font-size
font-weight
grid
left length
letter-spacing
line-height
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
min-height
min-width
opacity
outline-color
outline-offset
outline-width
padding-bottom
padding-left
padding-right
padding-top
right length
text-indent
text-shadow
top length
vertical-align
visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number

Example:

have an element with the id #element and with an initial width of 10 pixels and you want to expand its width by 200 pixels on :hoverin a smooth transition. Here’s the code you would use to achieve this:

#element{
width:10px;
height:20px;
display:block;
background:#ccc;
transition-property:width;
transition-duration:1s;
transition-timing-function: linear;
transition-delay:1s;
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz- transition-timing-function: linear;
-moz-transition-delay:1s;
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit- transition-timing-function: linear;
-webkit- transition-delay:1s;
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function: linear;
-o-transition-delay:1s;
}

#element:hover{
width:200px;
}

Going even further with animations in CSS3

The Keyframes Rule:

To create animations containing more than two states with CSS3, you have to use the new @keyframes rule.

@keyframes myFirstAnimation{
}

Every key frame will be treated after another one chronologically according to its selector value and not necessarily in the order you write them.

@keyframes myFirstAnimation{
0%{
margin-left:0
}
50%{
margin-left:10px;
}
100%{
margin-left:20px;
}
}

This example sets three states for the animation named myFirstAnimation.

Now let’s bind the previous small animation named myFirstAnimationto an element having element for its
id as an example:

#element{
animation-name: myFirstAnimation;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: 2;
animation-direction: alternate;
animation-play-state: running;
}

You can bind multiple animations to an element by using a comma-separated list:

#element{
animation-name: myFirstAnimation, mySecondAnimation;
animation-duration: 2s,1s;
animation-timing-function: linear,ease;
animation-delay: 1s,2s;
animation-iteration-count: 2,1;
animation-direction: alternate;
animation-play-state: running;
}

Applying 3D transformations in CSS3

The CSS3 3D transforms module is quite similar to 2D transformations and provides functions to rotate, translate, scale, and apply matrix transformations in a 3D Cartesian
coordinate system to any element.

Perspective:

#parent{
perspective:500px;
}

Use this bellow when you want to target only an element. Here’s an example:

#element{
transform:perspective(500px) rotateX(45deg);
}

Perspective Origin:

perspective-origin:top left;

The backface-visibility property:

When you are in 3D, you’ll be able to position elements in such a way that in some situations their reverse side will then be visible. It can have two obvious values: hidden or visible

#element{
backface-visibility: hidden;
}

This is just a peak into the amazing world of CSS3, and intro of what will come in the future. We will be creating a great tutorials using these amazing CSS3 stuff like menus, accordions, sliders, layouts, animations and much more, with demos and option to download the entire project, so stay with us…

Tags :
Uzabila

About Uzabila

Web Design, WordPress developer & enthusiast. Co-Founder of CreativeVerse.com

Leave a Reply

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

*

If you are not a robot - solve an example: * Time limit is exhausted. Please reload the CAPTCHA.

Scroll To Top