Ajax Loader
×
HTML 
<div class="frame frame--realistic">
1
<div class="frame frame--realistic">
2
    <div class="door door--ani"></div>
3
</div>
 
CSS 
.frame {
1
.frame {
2
    -moz-border-bottom-colors: none;
3
    -moz-border-left-colors: none;
4
    -moz-border-right-colors: none;
5
    -moz-border-top-colors: none;
6
    border-color: saddlebrown saddlebrown -moz-use-text-color;
7
    border-image: none;
8
    border-style: solid solid none;
9
    border-width: 1em 1em medium;
10
    height: 6.5em;
11
    margin: 0.5em auto;
12
    width: 5em;
13
}
14
.frame--realistic {
15
    perspective: 20em;
16
}
17
 
18
.door {
19
    background: none repeat scroll 0 0 darksalmon;
20
    height: inherit;
21
}
22
.door--ani {
23
    animation: 1.3s ease-in-out 0s alternate none infinite doorani;
24
    transform-origin: 0 0 0;
25
}
26
 
27
@-moz-keyframes doorani {
28
0% {
29
    transform: rotateY(-43deg);
30
}
31
100% {
32
    transform: rotateY(43deg);
33
}
34
}
35
@-moz-keyframes doorani {
36
0% {
37
    transform: rotateY(-43deg);
38
}
39
100% {
40
    transform: rotateY(43deg);
41
}
42
}
 
JavaScript 
//http://davidwalsh.name/3d-transforms
1
//http://davidwalsh.name/3d-transforms
 

3d css anim door

CSSDeck G+