CSS3 allows you to format your elements using 3D transforms.
In this chapter you will learn about some of the 3D transform methods:
Click on the elements below, to see the difference between a 2D transform and a 3D transform:
2D rotate
3D rotate
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
|
Property |
|
|
|
|
|
|
transform |
10.0 |
36.0 |
16.0 |
4.0 -webkit- |
23.0 |
|
transform-origin |
10.0 |
36.0 |
16.0 |
4.0 -webkit- |
23.0 |
|
transform-style |
11.0 |
36.0 |
16.0 |
4.0 -webkit- |
23.0 |
|
perspective |
10.0 |
36.0 |
16.0 |
4.0 -webkit- |
23.0 |
|
perspective-origin |
10.0 |
36.0 |
16.0 |
4.0 -webkit- |
23.0 |
|
backface-visibility |
10.0 |
36.0 |
16.0 |
4.0 -webkit- |
23.0 |
With the rotateX() method, the element rotates around its X-axis at a given degree.
div {
-webkit-transform: rotateX(120deg); /* Chrome, Safari, Opera */
transform: rotateX(120deg);
}
With the rotateY() method, the element rotates around its Y-axis at a given degree.
div {
-webkit-transform: rotateY(130deg); /* Chrome, Safari, Opera */
transform: rotateY(130deg);
}
The following table lists all the transform properties:
|
Property |
Description |
|
Applies a 2D or 3D transformation to an element |
|
|
Allows you to change the position on transformed elements |
|
|
Specifies how nested elements are rendered in 3D space |
|
|
Specifies the perspective on how 3D elements are viewed |
|
|
Specifies the bottom position of 3D elements |
|
|
Defines whether or not an element should be visible when not facing the screen |
|
Function |
Description |
|
matrix3d |
Defines a 3D transformation, using a 4x4 matrix of 16 values |
|
translate3d(x,y,z) |
Defines a 3D translation |
|
translateX(x) |
Defines a 3D translation, using only the value for the X-axis |
|
translateY(y) |
Defines a 3D translation, using only the value for the Y-axis |
|
translateZ(z) |
Defines a 3D translation, using only the value for the Z-axis |
|
scale3d(x,y,z) |
Defines a 3D scale transformation |
|
scaleX(x) |
Defines a 3D scale transformation by giving a value for the X-axis |
|
scaleY(y) |
Defines a 3D scale transformation by giving a value for the Y-axis |
|
scaleZ(z) |
Defines a 3D scale transformation by giving a value for the Z-axis |
|
rotate3d(x,y,z,angle) |
Defines a 3D rotation |
|
rotateX(angle) |
Defines a 3D rotation along the X-axis |
|
rotateY(angle) |
Defines a 3D rotation along the Y-axis |
|
rotateZ(angle) |
Defines a 3D rotation along the Z-axis |
|
perspective(n) |
Defines a perspective view for a 3D transformed element |
With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
Mouse over the element below:
CSS3
Transition
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
|
Property |
|
|
|
|
|
|
transition |
10.0 |
26.0 |
16.0 |
6.1 |
12.1 |
|
transition-delay |
10.0 |
26.0 |
16.0 |
6.1 |
12.1 |
|
transition-duration |
10.0 |
26.0 |
16.0 |
6.1 |
12.1 |
|
transition-property |
10.0 |
26.0 |
16.0 |
6.1 |
12.1 |
|
transition-timing-function |
10.0 |
26.0 |
16.0 |
6.1 |
12.1 |
CSS3 transitions are effects that let an element gradually change from one style to another.
To do this, you must specify two things:
Add a transition effect on the width property, with a duration of 2 seconds:
div {
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.
The transition effect will start when the specified CSS property changes value. A typical CSS property change would be when a user mouse-over an element:
Specify :hover for <div> elements:
div:hover {
width: 300px;
}
Note: When the cursor mouse out of the element, it gradually changes back to its original style.
To add transition effects for more than one CSS property, separate the properties with a comma:
Add transition effects on width, height, and transformation:
div {
-webkit-transition: width 2s, height 2s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s, height 2s, transform 2s;
}
The example below uses all the four transition properties:
div {
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 2s;
/* Standard syntax */
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
}
The same transition effects as the example above. However, here we are using the shorthand transition property:
div {
-webkit-transition: width 1s linear 2s; /* For Safari 3.1 to 6.0 */
transition: width 1s linear 2s;
}
The following table lists all the transition properties:
|
Property |
Description |
CSS |
|
A shorthand property for setting the four transition properties into a single property |
3 |
|
|
Specifies when the transition effect will start |
3 |
|
|
Specifies how many seconds or milliseconds a transition effect takes to complete |
3 |
|
|
Specifies the name of the CSS property the transition effect is for |
3 |
|
|
Specifies the speed curve of the transition effect |
3 |
With CSS3, we can create animations which can replace Flash animations, animated images, and JavaScripts in existing web pages.
CSS3
Animation
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with a prefix.
|
Property |
|
|
|
|
|
|
@keyframes |
10.0 |
4.0 -webkit- |
16.0 |
4.0 -webkit- |
15.0 -webkit- |
|
animation |
10.0 |
4.0 -webkit- |
16.0 |
4.0 -webkit- |
15.0 -webkit- |
The @keyframes rule is where the animation is created.
Specify a CSS style inside the @keyframes rule and the animation will gradually change from the current style to the new style.
When an animation is created in the @keyframe rule, you must bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a selector (element) by specifying at least these two properties:
Bind the "myfirst" animation to the div element. Animation duration: 5 seconds:
div {
-webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
animation: myfirst 5s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
/* Standard syntax */
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
Note: If the duration part is not specified, the animation will have no effect, because the default value is 0.
An animation lets an element gradually change from one style to another.
You can change as many properties you want, as many times you want.
You can specify when the change will happen in percent, or you can use the keywords "from" and "to" (which represents 0% and 100%).
0% represents the start of the animation, 100% is when the animation is complete.
Change the background color when the animation is 25%, and 50%, and again when the animation is 100% complete:
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
Change the background color and the position when the animation is 25%, 50%, 75%, and again when the animation is 100% complete:
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes myfirst {
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
The example below uses seven of the animation properties:
div {
/* Chrome, Safari, Opera */
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Standard syntax */
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
The same animation effect as the example above (except the animation-play-state property). However, here we are using the shorthand animation property:
div {
-webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */
}
The following table lists the @keyframes rule and all the animation properties:
|
Property |
Description |
CSS |
|
Specifies the animation |
3 |
|
|
A shorthand property for setting all the animation properties, except the animation-play-state and the animation-fill-mode property |
3 |
|
|
Specifies when the animation will start |
3 |
|
|
Specifies whether or not the animation should play in reverse on alternate cycles |
3 |
|
|
Specifies how many seconds or milliseconds an animation takes to complete one cycle |
3 |
|
|
Specifies what styles will apply for the element when the animation is not playing (when it is finished, or when it has a "delay") |
3 |
|
|
Specifies the number of times an animation should be played |
3 |
|
|
Specifies the name of the @keyframes animation |
3 |
|
|
Specifies whether the animation is running or paused |
3 |
|
|
Specifies the speed curve of the animation |
3 |
With CSS3, you can create multiple columns for laying out text - like in newspapers!
In this chapter you will learn about the following multiple column properties:
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
|
Property |
|
|
|
|
|
|
column-count |
10.0 |
4.0 -webkit- |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit- |
|
column-gap |
10.0 |
4.0 -webkit- |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit- |
|
column-rule |
10.0 |
4.0 -webkit- |
2.0 -moz- |
3.1 -webkit- |
15.0 -webkit- |
The column-count property specifies the number of columns an element should be divided into:
Divide the text in a div element into three columns:
div {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
}
The column-gap property specifies the gap between the columns:
Specify a 40 pixels gap between the columns:
div {
-webkit-column-gap: 40px; /* Chrome, Safari, Opera */
-moz-column-gap: 40px; /* Firefox */
column-gap: 40px;
}
The column-rule property sets the width, style, and color of the rule between columns.
Specify the width, style and color of the rule between columns:
div {
-webkit-column-rule: 3px outset #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 3px outset #ff00ff; /* Firefox */
column-rule: 3px outset #ff00ff;
}
The following table lists all the multiple columns properties:
|
Property |
Description |
CSS |
|
Specifies the number of columns an element should be divided into |
3 |
|
|
Specifies how to fill columns |
3 |
|
|
Specifies the gap between the columns |
3 |
|
|
A shorthand property for setting all the column-rule-* properties |
3 |
|
|
Specifies the color of the rule between columns |
3 |
|
|
Specifies the style of the rule between columns |
3 |
|
|
Specifies the width of the rule between columns |
3 |
|
|
Specifies how many columns an element should span across |
3 |
|
|
Specifies the width of the columns |
3 |
|
|
A shorthand property for setting column-width and column-count |
3 |
In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining.
In this chapter you will learn about the following user interface properties:
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
|
Property |
|
|
|
|
|
|
resize |
Not supported |
4.0 |
5.0 |
4.0 |
15.0 |
|
box-sizing |
Partial from 8.0 |
10.0 |
29.0 |
5.1 |
9.5 |
|
outline-offset |
Not supported |
4.0 |
5.0 |
4.0 |
9.5 |
In CSS3, the resize property specifies whether or not an element should be resizable by the user.
This div element is resizable by the user (in Firefox, Chrome, and Safari).
The CSS code is as follows:
Specify that a div element should be resizable by the user:
div {
resize: both;
overflow: auto;
}
The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box or just the content-box which is the default value of the width and height properties.
For example, if you want two bordered boxes side by side, it can be achieved through setting box-sizing to "border-box". This forces the browser to render the box with the specified width and height, and place the border and padding inside the box.
Specify two bordered boxes side by side:
div {
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box;
width: 50%;
float: left;
}
The outline-offset property offsets an outline, and draws it beyond the border edge.
Outlines differ from borders in two ways:
This div has an outline 15px outside the border edge.
The CSS code is as follows:
Specify an outline 15px outside the border edge:
div {
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;
}
The following table lists all the user-interface properties:
|
Property |
Description |
CSS |
|
Allows you to make an element look like a standard user interface element |
3 |
|
|
Allows you to define certain elements to fit an area in a certain way |
3 |
|
|
Provides the author the ability to style an element with an iconic equivalent |
3 |
|
|
Specifies where to navigate when using the arrow-down navigation key |
3 |
|
|
Specifies the tabbing order for an element |
3 |
|
|
Specifies where to navigate when using the arrow-left navigation key |
3 |
|
|
Specifies where to navigate when using the arrow-right navigation key |
3 |
|
|
Specifies where to navigate when using the arrow-up navigation key |
3 |
|
|
Offsets an outline, and draws it beyond the border edge |
3 |
|
|
Specifies whether or not an element is resizable by the user |
3 |
This tutorial has taught you how to create style sheets to control the style and layout of multiple web sites at once.
You have learned how to use CSS to add backgrounds, format text, add and format borders, and specify padding and margins of elements.
You have learned how to position an element, control the visibility and size of an element, set the shape of an element, place an element behind another, and to add special effects to some selectors, like links.
You have also learned about many of the new features in CSS3: rounded borders, box and text shadows, gradient backgrounds, 2D and 3D transformations, transitions, animations, multiple columns, and more.