CSS Avengers Card with 3D rotation and neon effect

发表于 | 分类于

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/