JSDM

HTML

 
1
<div id="tridiv">
2
  <div class="scene">
3
    <div class="shape cuboid-1 cub-1">
4
      <div class="face ft">
5
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
6
      </div>
7
      <div class="face bk">
8
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
9
      </div>
10
      <div class="face rt">
11
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
12
      </div>
13
      <div class="face lt">
14
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
15
      </div>
16
      <div class="face bm">
17
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
18
      </div>
19
      <div class="face tp">
20
        <div class="photon-shader" style="background-color: rgba(255, 255, 255, 0.0705882);"></div>
21
      </div>
22
    </div>
23
  </div>
24
</div>

CSS

​x
 
1
/* /!\ You need to add vendor prefixes in order to render the CSS properly (or simply use http://leaverou.github.io/prefixfree/) /!\ */
2
body{
3
  background:#111111;
4
  margin:0;
5
  padding:0;
6
  width:100%;
7
  height:100%;
8
}
9
​
10
#tridiv {
11
  perspective: 800px;
12
  position: absolute;
13
  overflow: hidden;
14
  width: 100%;
15
  height: 100%;
16
  background: transparent;
17
  font-size: 100%;
18
}
19
.scene, .shape, .face, .face-wrapper, .cr {
20
  position: absolute;
21
  transform-style: preserve-3d;
22
}
23
.scene {
24
  width: 80em;
25
  height: 80em;
26
  top: 50%;
27
  left: 50%;
28
  margin: -40em 0 0 -40em;
29
    -webkit-animation: rotate 5s infinite; /* Safari 4+ */
30
  -moz-animation:    rotate 5s infinite; /* Fx 5+ */
31
  -o-animation:      rotate 5s infinite; /* Opera 12+ */
32
  animation:        rotate 5s infinite; /* IE 10+ */
33
}
34
.shape {
35
  top: 50%;
36
  left: 50%;
37
  width: 0;
38
  height: 0;
39
  transform-origin: 50%;
40
  background:#C0D028;
41
}
42
.face, .face-wrapper {
43
  overflow: hidden;
44
  transform-origin: 0 0;
45
  backface-visibility: hidden;
46
  /* hidden by default, prevent blinking and other weird rendering glitchs */
47
48
}
49
.face {
50
  box-shadow: inset -2px -2px 2px 3px #C0D028;
51
}
52
.face {
53
  background-size: 100% 100%!important;
54
  background-position: center;
55
  background-color:#C0D028;
56
}
57
.face-wrapper .face {
58
  left: 100%;
59
  width: 100%;
60
  height: 100%
61
}
62
.photon-shader {
63
  position: absolute;
64
  left: 0;
65
  top: 0;
66
  width: 100%;
67
  height: 100%
68
}
69
.side {
70
  left: 50%;
71
}
72
.cr, .cr .side {
73
  height: 100%;
74
}
75
[class*="cuboid"] .ft, [class*="cuboid"] .bk {
76
  width: 100%;
77
  height: 100%;
78
}
79
[class*="cuboid"] .bk {
80
  left: 100%;
81
}
82
[class*="cuboid"] .rt {
83
  transform: rotateY(-90deg) translateX(-50%);
84
}
85
[class*="cuboid"] .lt {
86
  transform: rotateY(90deg) translateX(-50%);
87
}
88
[class*="cuboid"] .tp {
89
  transform: rotateX(90deg) translateY(-50%);
90
}
91
[class*="cuboid"] .bm {
92
  transform: rotateX(-90deg) translateY(-50%);
93
}
94
[class*="cuboid"] .lt {
95
  left: 100%;
96
}
97
[class*="cuboid"] .bm {
98
  top: 100%;
99
}
100
/* .cub-1 styles */
101
.cub-1 {
102
  transform:translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(360deg) rotateZ(0deg);
103
  opacity:1;
104
  width:19.18em;
105
  height:5em;
106
  margin:-2.5em 0 0 -9.59em;
107
  background-color:#C0D028;
108
}
109
.cub-1 .ft {
110
  transform:translateZ(2.5em);
111
}
112
.cub-1 .bk {
113
  transform:translateZ(-2.5em) rotateY(180deg);
114
}
115
.cub-1 .rt, .cub-1 .lt {
116
  width:5em;
117
  height:5em;
118
}
119
.cub-1 .tp, .cub-1 .bm {
120
  width:19.18em;
121
  height:5em;
122
}
123
.cub-1 .face {
124
  background-color:#FFFFFF;
125
}
126
.cub-1 .ft {
127
  background:url(http://projects.bearddesign.co/burrp/front-main.svg);
128
}
129
.cub-1 .bk {
130
  background:url(http://projects.bearddesign.co/burrp/back.svg);
131
}
132
.cub-1 .tp {
133
  background:url(http://projects.bearddesign.co/burrp/top.svg);
134
}
135
.cub-1 .bm {
136
  background:url(http://projects.bearddesign.co/burrp/front-main.svg);
137
}
138
.cub-1 .lt {
139
  background:url(http://projects.bearddesign.co/burrp/side-drink.svg);
140
}
141
.cub-1 .rt {
142
  background:url(http://projects.bearddesign.co/burrp/side-food.svg);
143
}
144
​
145
@-webkit-keyframes rotate {
146
  0%   {
147
    -webkit-transform:rotateX(0deg) rotateY(0deg); }
148
  15%   {
149
    -webkit-transform:rotateX(0deg) rotateY(0deg); }
150
  25% {
151
    -webkit-transform:rotateX(0deg) rotateY(-300deg) rotateZ(0deg);
152
  }
153
   30% {
154
    -webkit-transform:rotateX(0deg) rotateY(-270deg) rotateZ(0deg);
155
  }
156
   45% {
157
    -webkit-transform:rotateX(0deg) rotateY(-270deg) rotateZ(0deg);
158
  }
159
  60% {
160
    -webkit-transform:rotateX(300deg) rotateY(-200deg) rotateZ(0deg);
161
  }
162
  65% {
163
    -webkit-transform:rotateX(270deg) rotateY(-180deg) rotateZ(0deg);
164
  }
165
  90%   {
166
    -webkit-transform:rotateX(10deg) rotateY(10deg) rotateZ(0deg); }
167
168
  100%   {
169
    -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
170
}
171
@keyframes rotate {
172
  0%   {
173
    -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
174
  15%   {
175
    -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
176
  25% {
177
    -webkit-transform:rotateX(0deg) rotateY(-300deg) rotateZ(0deg);
178
  }
179
   30% {
180
    -webkit-transform:rotateX(0deg) rotateY(-270deg) rotateZ(0deg);
181
  }
182
   45% {
183
    -webkit-transform:rotateX(0deg) rotateY(-270deg) rotateZ(0deg);
184
  }
185
  60% {
186
    -webkit-transform:rotateX(300deg) rotateY(-200deg) rotateZ(0deg);
187
  }
188
  65% {
189
    -webkit-transform:rotateX(270deg) rotateY(-180deg) rotateZ(0deg);
190
  }
191
  90%   {
192
    -webkit-transform:rotateX(10deg) rotateY(10deg) rotateZ(0deg)}
193
194
  100%   {
195
    -webkit-transform:rotateX(0deg) rotateY(0deg); }
196
}
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

xxxxxxxxxx
1
 
1
​
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................