CSS Avengers Card with 3D rotation and neon effect

发表于 2015-05-17   |   分类于 CSS

Avengers assemble an SVG scalable logo!
Sort of virtual hologram Marvel Avengers card with 3D rotate animation, SVG scalable Avengers logo and Iron Man colors (red and gold) and a nice neon effect.
Pure CSS and an SVG Avengers logo.

###HTML

1
2
3
<div class="card animate">
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Symbol_from_Marvel%27s_The_Avengers_logo.svg/191px-Symbol_from_Marvel%27s_The_Avengers_logo.svg.png" width="191" height="223" />
</div>

###CSS

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
html,body{
background:#252527;
color:#fff;
margin:0;padding:0;
display:block;overflow:hidden;
width:100%;
height:100%;
}
img{
  display:block;
/*
  width:191px;height:223px;
  */
  color:#fff;background:transparent;
  width: 100%; height: auto;
margin:0;
transform:rotate3d(0,0,0,0);
-webkit-transform:rotate3d(0,0,0,0);
-moz-transform:rotate3d(0,0,0,0);
-o-transform:rotate3d(0,0,0,0);
-ms-transform:rotate3d(0,0,0,0);
}
.animate{
  animation:spin 4s linear infinite;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    -o-animation:spin 4s linear infinite;
    -ms-animation:spin 4s linear infinite;
}
@keyframes spin { 100% { transform:rotateY(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotateY(360deg); } }
@-moz-keyframes spin { 100% { -moz-transform: rotateY(360deg); } }
@-o-keyframes spin { 100% { -o-transform:rotateY(360deg); } }
@-ms-keyframes spin { 100% { -ms-transform:rotateY(360deg); } }
.card{
  width: 50%;max-width:150px; height: auto;
margin: 30% auto;
padding:20% 10%;
border-radius:10px;
background:#ED1C24;
background: rgb(180,112,107);
background: -moz-linear-gradient(top,  rgba(180,112,107,1) 0%, rgba(144,53,39,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,112,107,1)), color-stop(100%,rgba(144,53,39,1)));
background: -webkit-linear-gradient(top,  rgba(180,112,107,1) 0%,rgba(144,53,39,1) 100%);
background: -o-linear-gradient(top,  rgba(180,112,107,1) 0%,rgba(144,53,39,1) 100%);
background: -ms-linear-gradient(top,  rgba(180,112,107,1) 0%,rgba(144,53,39,1) 100%);
background: linear-gradient(to bottom,  rgba(180,112,107,1) 0%,rgba(144,53,39,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4706b', endColorstr='#903527',GradientType=0 );
opacity:0.75;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
    border: 5px solid #D8C160;
    box-shadow: 0 0 30px #EEE5CD;
}
body{
perspective-origin: 0% 0%;
-webkit-perspective-origin: 0% 0%;
-moz-perspective-origin: 0% 0%;
-o-perspective-origin: 0% 0%;
-ms-perspective-origin: 0% 0%;
  perspective: 1200px;
-webkit-perspective: 1200px;
-moz-perspective: 2800px;
-o-perspective: 1200px;
-ms-perspective: 1200px;
background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 10px 10px;
}

###References:
http://andreapaiola.name/2015-05-css-avengers/

#CSS
SpaceMonkey
Secret code in Ex Machina