Creating Illusions of 3D objects in CSS3

A lot of times when we are developing we like to keep the pixel size of the web page to a bare minimum. Not only does it decrease load time which creates happier customers, but it also gives a secret bonus to SEO.

If you are not familiar with using pseudo elements, then the table below should help clarify some of the ambiguity behind them. You attach these selectors to css classes, ids, or elements.

Example: a:visited { color:red; }

This would turn every link you visit, red.

All CSS Pseudo Classes/Elements

Selector

Example

Example description

:link

a:link

Selects all unvisited links

:visited

a:visited

Selects all visited links

:active

a:active

Selects the active link

:hover

a:hover

Selects links on mouse over

:focus

input:focus

Selects the input element which has focus

:first-letter

p:first-letter

Selects the first letter of every <p> element

:first-line

p:first-line

Selects the first line of every <p> element

:first-child

p:first-child

Selects every <p> elements that is the first child of its parent

:before

p:before

Insert content before every <p> element

:after

p:after

Insert content after every <p> element

:lang(language)

p:lang(it)

Selects every <p> element with a lang attribute value starting with “it”

 

Let’s do something more fun.

The tutorial over at Inspect Element is a great resource on pseudo elements.

1
2
3
<div class="stack">  
    <img src="image1.jpg" />
</div>

How to create the first image in the series:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.stack { position: relative; z-index: 10; }
 
/* Image styles */
.stack img { max-width: 100%; height: auto; vertical-align: bottom; border: 10px solid #fff; border-radius: 3px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
 
/* Stacks creted by the use of generated content */
.stack:before, .stack:after { content: ""; border-radius: 3px; width: 100%; height: 100%; position: absolute; border: 10px solid #fff; left: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    -webkit-transition: 0.3s all ease-out;
    -moz-transition: 0.3s all ease-out;
    transition: 0.3s all ease-out;
}
.stack:before { top: 4px; z-index: -10; } /* 1st element in stack (behind image) */
.stack:after { top: 8px; z-index: -20; } /* 2nd element in stack (behind image) */

How to create the second image in the series:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Second stack example (rotated to the right from the bottom left) */
.stack.rotated:before {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    transform: rotate(2deg);
}
.stack.rotated:after {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    transform: rotate(4deg);
}

How to create the third image in the series:

1
2
3
4
5
6
7
8
9
10
11
/* Third stack example (One stack element rotated in the opposite direction) */
.stack.twisted:before {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    transform: rotate(4deg);
}  
.stack.twisted:after {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    transform: rotate(-4deg);
}

How to create the fourth image in the series:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* Fourth stack example (Similar to the second but rotated left) */
.stack.rotated-left:before {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    transform: rotate(-3deg);
}
.stack.rotated-left:after {
    -webkit-transform-origin: bottom left;
    -moz-transform-origin: bottom left;
    transform-origin: bottom left;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    transform: rotate(-6deg);
}

The pseudo elements are respected on every browser (since IE6), but transitions are only supported on the latest browsers. This would make it wise for a developer to stay away from transitions for now.