Ajax Loader
HTML
<div class="tile flip">
1
<div class="tile flip">
2
  <div>
3
      HOVER THIS
4
  </div>
5
  <a href="#">
6
      CLICK
7
  </a>
8
</div>
9
 
10
<div class="tile slide">
11
  <div>
12
      HOVER THIS
13
  </div>
14
  <a href="#">
15
      CLICK
16
  </a>
17
</div>
18
<div class="tile shutter">
19
  <div>
20
      HOVER THIS
21
  </div>
22
  <a href="#">
23
      CLICK
24
  </a>
25
</div>
26
 
27
<div class="tile page">
28
  <div>
29
      HOVER THIS
30
  </div>
31
  <a href="#">
32
      CLICK
33
  </a>
34
</div>
35
 
 
CSS
@import url(http://fonts.googleapis.com/css?family=Yanone\+Kaffeesatz)
1
@import url(http://fonts.googleapis.com/css?family=Yanone\+Kaffeesatz)
2
 
3
bgBrown = #30261c
4
tileSize = 200px
5
 
6
duration = .05s
7
curve = linear
8
 
9
/* Body general styles */
10
body
11
  background: bgBrown
12
  font-family: "Yanone Kaffeesatz", sans-serif
13
  text-align: center
14
  width: 100%
15
  font-size: 45px
16
  
17
  /* Vertical centering */
18
  top: 50%
19
  position: absolute
20
  height: (tileSize / 2)
21
  margin-top: -(@height / 2)
22
 
23
/* Margin between tiles */
24
body > div + div
25
  margin-left: 50px
26
 
27
/* Style of every tile */
28
.tile
29
  display: inline-block
30
 
31
  width: tileSize
32
  height: (tileSize / 2)
33
  line-height: @height
34
 
35
  perspective: 300px
36
 
37
  /* Style for containing elements */
38
  > div, a
39
    width: 100%
40
    color: #30261c
41
    background-color: #e4ecb9
42
    text-align: center
43
 
44
  /* Style for the hidden link */
45
  > a
46
    display: block
47
    text-decoration: none
48
    background-color: #d88e8f
49
 
50
 
51
 
52
/* Flip effect */
53
.flip
54
  > div, a
55
    position: absolute
56
  > a
57
    transform: rotateX(-90deg)
58
  &:hover
59
    > div
60
      transform: rotateX(90deg)
61
    > a
62
      transform: rotateX(0deg)
63
  &:hover > div, > a
64
    transition: duration all curve 0
65
  &:hover > a, > div
66
    transition: duration all curve duration
67
 
68
 
69
/* Slide effect */
70
.slide
71
  overflow: hidden
72
  > div, a
73
    transition: duration*2 all curve
74
    position: absolute
75
  > a
76
    transform: translate(tileSize, 0)
77
  &:hover
78
    > div
79
      transform: translate(-(tileSize), 0)
80
    > a
81
      transform: translate(0, 0)
82
   
83
 
84
/* Shutter effect */
85
.shutter
86
  > div, a
87
    transition: duration*2 all curve
88
    position: absolute
89
  > div
90
    z-index: 10
91
    transform-origin: 0% 0%
92
    
93
  &:hover
94
    > div
95
      transform: rotateX(90deg)
96
 
97
 
98
/* Page effect */
99
.page
100
  > div, a
101
    transition: duration*4 all curve
102
    position: absolute
103
    z-index: 5
104
  > div
105
    z-index: 10
106
    transform-origin: 0% 0%
107
    
108
  &:hover
109
    > div
110
      transform: rotateX(360deg)
111
      z-index: 1
 

Tile transition effects

CSSDeck G+