Forum - Rotierende Animation von Bildern

Um alle Funktionen nutzen zu können, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! » Rotierende Animation von Bildern - Würfel Animation

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ankündigungen & Termine, wichtige News. Stellen Sie Ihr eigene Webseite vor. Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps. MS Windows 11, 10, 8 und 7 - Fragen & Antworten. Linux, Ubuntu und andere Betriebssysteme. Ärger mit dem PC, Laptop oder Tablet? Ärger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe? Ärger mit dem PC, Laptop oder Tablet - Fragen & Antworten? Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten. XOBOR-Foren und Homepages Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! Das neue Template Xobor (v6). Energieerzeugung im neuen Zeitalter - Revolutionär! Videos und Webseiten zur Freien Energie. Wasserstoff - Energieträger der Zukunft. Elektronik & Elektrotechnik Elektronik & Elektrotechnik - Fragen und Antworten Elektronik & Elektrotechnik - Praxis - Highlights Die besten Links! Empfehlenswerte und interessante Links! Link - Suche. Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps für Smartphones und iPhones. Lob, Kritik & Verbesserungsvorschläge. Spiel & Spaß, Witz & gute Laune! Spiritualität, Seele, New Age, Yoga, Gesundheit. Alles, was noch so übrig bleibt. Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel.

#1 | Rotierende Animation von Bildern - Würfel Animation datum

12.10.2024 19:12 (zuletzt bearbeitet: 09.12.2024 18:07)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Rotierende Animation von Bildern

Rotierende Animation von BildernBild-Animationen gibt es wie Sand am Meer!
Meist ist die CSS ziemlich groß, um einen doch noch kleinen Effekt zu erreichen!
Wie bereits des Öfteren erwähnt, muss man bei großen Animationen immer schauen, dass sie nicht zu aufdringlich, zu schnell, zu groß oder zu unruhig wirken.
Die Faszination und Vielseitigkeit von Animationen haben schon ihren Reiz!
Ratsam ist es auch, Animationen nicht dauerhaft laufen zu lassen, sie nach einer bestimmten Zeit zu beenden!

Im folgenden Beitrag ist es möglich vorhanden Bilder mit Rotationen zu belegen, die auch in ihren Durchläufen begrenzt werden können!
Hinzu kommt ein rotierender Würfel, der mit max. 6 Bildern oder auch nur mit ein und demselben Bild bestückt werden kann!

Hier testen:

1. Rotierende Bildanimation beim Mouseover: Rotierende Bildanimation

1. Rotierende Bildanimation beim Mouseover

Kann zum Testen in die kopiert werden!

Das Bild steht im Ruhezustand, dreht sich dann beim Mouseover und Mouseout.
Einfach und effektvoll!
Die Animation kommt mit minimalen CSS-Einträgen aus!
In Zeile 3-5 kann die Größe, die Geschwindigkeit und die Wiederholungen eingestellt werden!
Zeile 12 kann bei runden Bildern freigegeben werden (blendet einen vorhandenen Hintergrund aus)!
In Zeile 18 wird das Bild eingetragen
Es können mehrere Bilder nebeneinander platziert werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<style>
.Rotation1 {
  --RotationBreite: 150px; /* 8%, 4em */
  --RotationGeschwindigkeit: 6s;
  --RotationWiederholung: 1;
 
  width: var(--RotationBreite);
  transform: rotateY(calc(360deg * var(--RotationWiederholung)));
  transition: transform calc(var(--RotationGeschwindigkeit) * var(--RotationWiederholung)) 0.5s ease;
  cursor: pointer;
  /* border-radius: 50%; */
}
.Rotation1:hover {
  transform: rotateY(0deg);
}
</style>
 
<img src="https://files.homepagemodules.de/b104774/a_151_37e79f57.png" class="Rotation1">
 

Schließen

Hier testen:

2. Rotierende Bildanimation beim Seitenaufruf: Rotierende Bildanimation

2. Rotierende Bildanimation beim Seitenaufruf

Kann zum Testen in die kopiert werden!

Das Bild rotiert beim Seitenaufruf, bleibt nach einer vorgegebenen Wiederholung stehen, startet erneut beim Mouseout.
Einfach und effektvoll!
Die Animation kommt mit minimalen CSS-Einträgen aus!
In Zeile 3-5 kann die Größe, die Geschwindigkeit und die Wiederholungen eingestellt werden!
Zeile 12 kann bei runden Bildern freigegeben werden (blendet einen vorhandenen Hintergrund aus)!
In Zeile 24 wird das Bild eingetragen
Es können mehrere Bilder nebeneinander platziert werden!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<style>
.Rotation2 {
  --RotationBreite: 150px; /* 8%, 4em */
  --RotationGeschwindigkeit: 6s;
  --RotationWiederholung: 1;
  
  width: var(--RotationBreite); 
  animation:Rotation2 var(--RotationGeschwindigkeit) 0.5s linear infinite backwards;
  animation-iteration-count: var(--RotationWiederholung);
  transform: rotateY(0deg);
  cursor: pointer;
  /* border-radius: 50%; */
}
.Rotation2:hover {
  animation: none;
}
@keyframes Rotation2 {
  0% {transform: rotateY(0deg);} 50% {transform: rotateY(180deg);} 100% {transform: rotateY(360deg);}
}
</style>
 
<img src="https://files.homepagemodules.de/b104774/a_151_37e79f57.png" class="Rotation2">
 

Schließen

Hier testen:

3. Würfel mit verschiedenen Mouseover-Animationen: Würfel-Animationen mit Mouseover-Effekten

3. Rotierende Würfelanimation

Kann zum Testen in die kopiert werden!

Der Würfel rotiert um die eigene Achse in allen Richtungen, ist mit 6 wählbaren Mouseover-Animationen ausgestattet!
Sehr effektvoll!
In Zeile 3-7 kann die Größe, der Hintergrund, der Rahmen, die Geschwindigkeit und wenn freigegeben, die eingestellt werden!
In Zeile 12-17 kann separat beim Mouseover die Größe, die Farbe vom Hintergrund und der Rahmen, die Geschwindigkeit verändert werden oder auch Hintergrund- und Rahmenfarbe gelöscht werden!
In Zeile 31 kann die Würfel-Animation nach festgelegten Durchläufen gestoppt werden!
Es können mehrere Würfel nebeneinander platziert werden!

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
88
89
90
91
92
93
94
95
96
97
 
<style>
.wuerfelWrap { 
    --WuerfelGroesse: 80px;
    --WuerfelGroesseHover: 120px;
    --WuerfelHintergrund: #ddddff;
    --WuerfelRahmen: #444490;
    --WuerfelGeschwindigkeit: 20s; 
}
.wuerfelWrap:hover {
    /* --WuerfelGroesse: var(--WuerfelGroesseHover); */
    /* --WuerfelHintergrund: #ffdddd; */
    /* --WuerfelRahmen: #ff4490; */
    /* --WuerfelHintergrund: none; */
    /* --WuerfelRahmen: transparent; */ 
    /* --WuerfelGeschwindigkeit: 10s; */
}
.wuerfelWrap { 
    width: calc( (var(--WuerfelGroesseHover)) );
    height: calc( (var(--WuerfelGroesseHover)) );
    margin-left: 50px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 999999;
}
.wuerfel {
    height: var(--WuerfelGroesse);
    width: var(--WuerfelGroesse);
    transform-style: preserve-3d;
    transition: all 0.8s ease-in;
    animation: wuerfelRotate var(--WuerfelGeschwindigkeit) infinite linear;
    /* animation-iteration-count: 1; */
}
.wuerfel div {
   position: absolute;
   height: 100%;
   width: 100%;
   padding: 1px;
   box-sizing: border-box;
   opacity: 0.75;
   background-color: var(--WuerfelHintergrund);
   border: solid 2px var(--WuerfelRahmen);
   font: 10px arial;
   transition: transform  0.4s ease-in;
}
.wuerfel div img {
   width: 99%;
}
.wuerfelFront {
   transform: translateZ( calc((var(--WuerfelGroesse) )/2) );
}
.wuerfelBack {
   transform: translateZ( calc((var(--WuerfelGroesse) )/-2) ) rotateY(180deg);
}
.wuerfelRight {
   transform: rotateY(-270deg) translateX( calc((var(--WuerfelGroesse) )/2) );
   transform-origin: top right;
}
.wuerfelLeft {
   transform: rotateY(270deg) translateX( calc((var(--WuerfelGroesse) )/-2) );
   transform-origin: center left;
}
.wuerfelTop {
   transform: rotateX(-270deg) translateY( calc((var(--WuerfelGroesse) )/-2) );
   transform-origin: top center;
}
.wuerfelBottom {
   transform: rotateX(270deg) translateY( calc((var(--WuerfelGroesse) )/2) );
   transform-origin: bottom center;
}
 
@keyframes wuerfelRotate {
  from {transform: rotateX(0deg) rotateY(0deg);} to {transform: rotateX(360deg) rotateY(360deg);}
}
</style>                  
 
<div class="wuerfelWrap" title="Hier geht es zum Portal!">
  <div class="wuerfel">
    <div class="wuerfelFront">
      <img src="https://files.homepagemodules.de/b104774/a_151_37e79f57.png"> 
    </div>		
    <div class="wuerfelBack">
      <img src="https://files.homepagemodules.de/b104774/a_151_37e79f57.png"> 
    </div>
    <div class="wuerfelTop">
      <img src="https://files.homepagemodules.de/b104774/a_151_37e79f57.png"> 
    </div>
    <div class="wuerfelBottom">
      <img src="https://files.homepagemodules.de/b104774/a_151_37e79f57.png"> 
    </div>
    <div class="wuerfelLeft">
      <img src="https://files.homepagemodules.de/b104774/a_151_37e79f57.png"> 
    </div>
    <div class="wuerfelRight">
      <img src="https://files.homepagemodules.de/b104774/a_151_37e79f57.png">
    </div>
  </div>
</div>
 

Schließen

Bis dann und gutes Gelingen beim Einbau!
Wolfgang

Kipper-Spedition und Hans58 finden das Top!

Antworten

#2 | Bilder-Würfel mit Multi-Animation datum

26.11.2024 00:42 (zuletzt bearbeitet: 26.11.2024 11:48)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Spezielle Würfel-Animation mit Bildern - Ein Geschenk von Daishi

Spezielle Würfel-Animation mit Bildern

Es gibt sehr schöne und interessante Würfel-Animationen, aber diese Animation lässt einen ganzen Würfel in 27 kleine Würfel zerfallen und gegeneinander rotieren!
Faszinierend ist, dass die Bewegungen alle mit "CSS-Einträgen" aufgebaut sind, sehr komplex, recht groß, aber beeindruckend!

Was kann die neue Würfel-Animation?

Der Würfel präsentiert 6 beliebige Bilder auf eine besondere Art. Zerfällt der Würfel wird ein weiteres Bild freigegeben!
Das Grundskript läuft sehr gut in einem HTML-Editor.
Habe das Skript erweitert und fürs Xobor-Forum lauffähig gemacht!
Jetzt ist es ein Leichtes über "var" die Größe, Farben und Bilder für den Würfel einzutragen.
Alle wichtigen Einstellungen sind am Anfang vom Skript zu finden, ein aufwendiges Suchen nach den einzutragenden Stellen ist nicht erforderlich!

Hier testen:

4. Bilder-Würfel mit Multi-Animationen: Bilder-Würfel mit Mouseover-Effekten

4. Rotierende Würfel-Multi-Animationen

Kann zum Testen in die kopiert werden!

In Zeile 3-9 werden beliebige Bilder eingetragen, die Größe ist unkritisch und sollte über 300px betragen!
In Zeile 11-14 können weitere Optionen, wie Größe Farbe und Geschwindigkeit geändert und angepasst werden!
In Zeile 16 kann der Abstand des Würfels nach oben, nach rechts, nach unten und zum linken Rand bestimmt werden!
Es können mehrere Würfel nebeneinander platziert werden!

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
 
<style>
.startCube {
    --BildInnen: url("https://files.homepagemodules.de/b104774/avatar-e1e3f372-1.gif");
    --Bild-1: url("https://files.homepagemodules.de/b104774/a_151_37e79f57.png");
    --Bild-2: url("https://files.homepagemodules.de/b104774/a_151_37e79f57.png");
    --Bild-3: url("https://files.homepagemodules.de/b104774/a_151_37e79f57.png");
    --Bild-4: url("https://files.homepagemodules.de/b104774/a_151_37e79f57.png");
    --Bild-5: url("https://files.homepagemodules.de/b104774/a_151_37e79f57.png");
    --Bild-6: url("https://files.homepagemodules.de/b104774/a_151_37e79f57.png");
	
    --Groesse: 50px;
    --WuerfelHintergrund: #0f0faa;	 
    --WuerfelHintergrundHover: #5555ee;
    --Geschwindigkeit: 40s;
 
 margin: 100px 50px 30px 100px;
 position: relative;
 cursor:pointer;
 display:inline-block;
}
.startCube div {
  position: absolute;
  transform-style: preserve-3d;
}
 
.CubeDiv {
  transform: rotateX(-18deg) rotateY(-136deg);
  animation: cemara var(--Geschwindigkeit) ease-in-out infinite;
}
 
.startCube .comp-3d {
  animation: r  calc( var(--Geschwindigkeit) * 0.475 ) ease-in-out infinite;
}
 
.startCube .comp-3d--i {
  animation-name: ri;
}
 
.startCube .comp-3d--o {
  animation-name: ro;
}
 
.startCube .pos:nth-child(1) {
  transform: scale3d(1, 1, 1) translate3d(var(--Groesse), var(--Groesse), var(--Groesse));
}
 
.startCube :not(.pos) > .cube:nth-child(1) {
  transform: translate3d(calc( var(--Groesse)/-1 ), calc( var(--Groesse)/-1 ), 0em);
}
 
.startCube .pos:nth-child(2) {
  transform: scale3d(1, 1, -1) translate3d(var(--Groesse), var(--Groesse), var(--Groesse));
}
 
.startCube :not(.pos) > .cube:nth-child(2) {
  transform: translate3d(calc( var(--Groesse)/-1 ), 0em, calc( var(--Groesse)/-1 ));
}
 
.startCube :not(.pos) > .cube:nth-child(3) {
  transform: translate3d(calc( var(--Groesse)/-1 ), 0em, 0em);
}
 
.startCube :not(.pos) > .cube:nth-child(4) {
  transform: translate3d(calc( var(--Groesse)/-1 ), 0em, var(--Groesse));
}
 
.startCube .pos:nth-child(3) {
  transform: scale3d(1, -1, 1) translate3d(var(--Groesse), var(--Groesse), var(--Groesse));
}
 
.startCube :not(.pos) > .cube:nth-child(5) {
  transform: translate3d(calc( var(--Groesse)/-1 ), var(--Groesse), 0em);
}
 
.startCube .pos:nth-child(4) {
  transform: scale3d(1, -1, -1) translate3d(var(--Groesse), var(--Groesse), var(--Groesse));
}
 
.startCube :not(.pos) > .cube:nth-child(6) {
  transform: translate3d(0em, calc( var(--Groesse)/-1 ), calc( var(--Groesse)/-1 ));
}
 
.startCube :not(.pos) > .cube:nth-child(7) {
  transform: translate3d(0em, calc( var(--Groesse)/-1 ), 0em);
}
 
.startCube :not(.pos) > .cube:nth-child(8) {
  transform: translate3d(0em, calc( var(--Groesse)/-1 ), var(--Groesse));
}
 
.startCube :not(.pos) > .cube:nth-child(9) {
  transform: translate3d(0em, 0em, calc( var(--Groesse)/-1 ));
}
 
.startCube :not(.pos) > .cube:nth-child(10) {
  transform: translate3d(0em, 0em, 0em);
}
 
.startCube :not(.pos) > .cube:nth-child(11) {
  transform: translate3d(0em, 0em, var(--Groesse));
}
 
.startCube :not(.pos) > .cube:nth-child(12) {
  transform: translate3d(0em, var(--Groesse), calc( var(--Groesse)/-1 ));
}
 
.startCube :not(.pos) > .cube:nth-child(13) {
  transform: translate3d(0em, var(--Groesse), 0em);
}
 
.startCube :not(.pos) > .cube:nth-child(14) {
  transform: translate3d(0em, var(--Groesse), var(--Groesse));
}
 
.startCube .pos:nth-child(5) {
  transform: scale3d(-1, 1, 1) translate3d(var(--Groesse), var(--Groesse), var(--Groesse));
}
 
.startCube :not(.pos) > .cube:nth-child(15) {
  transform: translate3d(var(--Groesse), calc( var(--Groesse)/-1 ), 0em);
}
 
.startCube .pos:nth-child(6) {
  transform: scale3d(-1, 1, -1) translate3d(var(--Groesse), var(--Groesse), var(--Groesse));
}
 
.startCube :not(.pos) > .cube:nth-child(16) {
  transform: translate3d(var(--Groesse), 0em, calc( var(--Groesse)/-1 ));
}
 
.startCube :not(.pos) > .cube:nth-child(17) {
  transform: translate3d(var(--Groesse), 0em, 0em);
}
 
.startCube :not(.pos) > .cube:nth-child(18) {
  transform: translate3d(var(--Groesse), 0em, var(--Groesse));
}
 
.startCube .pos:nth-child(7) {
  transform: scale3d(-1, -1, 1) translate3d(var(--Groesse), var(--Groesse), var(--Groesse));
}
 
.startCube :not(.pos) > .cube:nth-child(19) {
  transform: translate3d(var(--Groesse), var(--Groesse), 0em);
}
 
.startCube .pos:nth-child(8) {
  transform: scale3d(-1, -1, -1) translate3d(var(--Groesse), var(--Groesse), var(--Groesse));
}
 
.startCube .pos .cube {
  animation: m calc( var(--Geschwindigkeit) * 0.725 )s ease-out infinite;
}
 
.startCube .cube__face {
  margin: calc( var(--Groesse)/-2 );
  width: var(--Groesse);
  height: var(--Groesse);
  box-shadow: 0 0 calc( var(--Groesse)/2 ) rgba(220, 220, 220, 0.2) inset;
  backface-visibility: hidden;
  background-color: var(--WuerfelHintergrund);
  background-image: var(--BildInnen);
  background-size: cover;
}
.startCube:hover .cube__face {
  background-color: var(--WuerfelHintergrundHover);
}
 
.startCube .cube__face:nth-child(2n) {
  filter: brightness(0.97);
}
 
.startCube .cube__face:nth-child(n+5) {
  filter: brightness(1.03);
}
 
.startCube .cube__face:nth-child(1) {
  transform: rotateY(0deg) translateZ(calc( var(--Groesse)/2 ));
}
 
.startCube .cube__face:nth-child(2) {
  transform: rotateY(90deg) translateZ(calc( var(--Groesse)/2 ));
}
 
.startCube .cube__face:nth-child(3) {
  transform: rotateY(180deg) translateZ(calc( var(--Groesse)/2 ));
}
 
.startCube .cube__face:nth-child(4) {
  transform: rotateY(270deg) translateZ(calc( var(--Groesse)/2 ));
}
 
.startCube .cube__face:nth-child(5) {
  transform: rotateX(90deg) translateZ(calc( var(--Groesse)/2 ));
}
 
.startCube .cube__face:nth-child(6) {
  transform: rotateX(-90deg) translateZ(calc( var(--Groesse)/2 ));
}
 
.startCube .face_bg {
  background-size: 300% 300%;
  background-repeat: no-repeat;
}
 
.startCube .face_bg-lt {
  background-position: left top;
}
 
.startCube .face_bg-ct {
  background-position: center top;
}
 
.startCube .face_bg-rt {
  background-position: right top;
}
 
.startCube .face_bg-lc {
  background-position: left center;
}
 
.startCube .face_bg-cc {
  background-position: center center;
}
 
.startCube .face_bg-rc {
  background-position: right center;
}
 
.startCube .face_bg-lb {
  background-position: left bottom;
}
 
.startCube .face_bg-cb {
  background-position: center bottom;
}
 
.startCube .face_bg-rb {
  background-position: right bottom;
}
 
.startCube .bg1 {
  background-image: var(--Bild-1);
}
 
.startCube .bg2 {
  background-image: var(--Bild-2);
}
 
.startCube .bg3 {
  background-image: var(--Bild-3);
}
 
.startCube .bg4 {
  background-image: var(--Bild-4);
}
 
.startCube .bg5 {
  background-image: var(--Bild-5);
}
 
.startCube .bg6 {
  background-image: var(--Bild-6);
}
 
.startCube .comp-3d--o .cube__face.bg1.face_bg-rt {
  transform: rotateY(90deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1) scaleY(-1);
}
.startCube .comp-3d--o .cube__face.bg1.face_bg-lt {
  transform: rotateY(90deg) translateZ(calc( var(--Groesse)/2 )) scaleY(-1);
}
.startCube .comp-3d--o .cube__face.bg1.face_bg-rb {
  transform: rotateY(90deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1);
}
 
.startCube .comp-3d--o .cube__face.bg2.face_bg-rt {
  transform: rotateY(0deg) translateZ(calc( var(--Groesse)/2 )) scaleY(-1);
}
.startCube .comp-3d--o .cube__face.bg2.face_bg-lt {
  transform: rotateY(0deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1) scaleY(-1);
}
.startCube .comp-3d--o .cube__face.bg2.face_bg-lb {
  transform: rotateY(0deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1);
}
 
.startCube .comp-3d--o .cube__face.bg3.face_bg-rb {
  transform: rotateX(-90deg) translateZ(calc( var(--Groesse)/2 )) scaleY(-1);
}
.startCube .comp-3d--o .cube__face.bg3.face_bg-lt {
  transform: rotateX(-90deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1);
}
.startCube .comp-3d--o .cube__face.bg3.face_bg-lb {
  transform: rotateX(-90deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1) scaleY(-1);
}
 
.startCube .comp-3d--o .cube__face.bg4.face_bg-rt {
  transform: rotateX(0deg) translateZ(calc( var(--Groesse)/2 )) scaleY(-1);
}
.startCube .comp-3d--o .cube__face.bg4.face_bg-lt {
  transform: rotateX(0deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1) scaleY(-1);
}
.startCube .comp-3d--o .cube__face.bg4.face_bg-lb {
  transform: rotateX(0deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1) scaleY(-1) scaleY(-1);
}
 
.startCube .comp-3d--o .cube__face.bg5.face_bg-rt {
  transform: rotateY(90deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1) scaleY(-1);
}
.startCube .comp-3d--o .cube__face.bg5.face_bg-lt {
  transform: rotateY(90deg) translateZ(calc( var(--Groesse)/2 )) scaleY(-1);
}
.startCube .comp-3d--o .cube__face.bg5.face_bg-rb {
  transform: rotateY(90deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1) scaleY(-1) scaleY(-1);
}
 
.startCube .comp-3d--o .cube__face.bg6.face_bg-rb {
  transform: rotateX(-90deg) translateZ(calc( var(--Groesse)/2 )) scaleY(-1);
}
.startCube .comp-3d--o .cube__face.bg6.face_bg-lt {
  transform: rotateX(-90deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1);
}
.startCube .comp-3d--o .cube__face.bg6.face_bg-lb {
  transform: rotateX(-90deg) translateZ(calc( var(--Groesse)/2 )) scaleX(-1) scaleY(-1);
}
 
@keyframes m {
  0%, 2.5%, 47.5%, 50% {
    transform: none;
  }
  7.5% {
    transform: translate3d(0, var(--Groesse), 0);
  }
  12.5% {
    transform: translate3d(0, var(--Groesse), var(--Groesse));
  }
  17.5%, 32.5% {
    transform: translate3d(var(--Groesse), var(--Groesse), var(--Groesse));
  }
  37.5% {
    transform: translate3d(var(--Groesse), 0, var(--Groesse));
  }
  42.5% {
    transform: translate3d(var(--Groesse), 0, 0);
  }
}
@keyframes ri {
  0%, 10%, 50.0001% {
    transform: none;
  }
  25% {
    transform: rotateX(0turn) rotateY(-1turn);
  }
  50%, 40% {
    transform: rotateX(-1turn) rotateY(-1turn);
  }
}
@keyframes ro {
  0%, 17.5%, 50.0001% {
    transform: none;
  }
  32.5%, 50% {
    transform: rotate(-1turn);
  }
}
@keyframes cemara {
  0%, 100% {
    transform: rotateX(-18deg) rotateY(-136deg);
  }
  25% {
    transform: rotateX(-190deg) rotateY(-50deg);
  }
  75% {
    transform: rotateX(160deg) rotateY(125deg);
  }
  50% {
    transform: rotateX(12deg) rotateY(12deg);
  }
}
</style>
 
<div class="startCube" title="Super-Animation - Aufteilung in 27 kleinen Würfeln">
<div class="CubeDiv">
 <div class="comp-3d comp-3d--i start">
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-ct bg5"></div>
      <div class="cube__face face_bg face_bg-lc bg3"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-rc bg2"></div>
      <div class="cube__face face_bg face_bg-lc bg5"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cc bg5"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face face_bg face_bg-lc bg4"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-rc bg5"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cb bg5"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-lc bg6"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-ct bg2"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-ct bg3"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cc bg3"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face face_bg face_bg-ct bg4"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cb bg3"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cc bg2"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face face_bg face_bg-cc bg4"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cb bg2"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cb bg6"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cc bg6"></div>
    </div>
    <div class="cube">
      <div class="cube__face face_bg face_bg-cb bg4"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-ct bg6"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-ct bg1"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-rc bg3"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-rc bg1"></div>
      <div class="cube__face face_bg face_bg-lc bg2"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cc bg1"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face face_bg face_bg-rc bg4"></div>
      <div class="cube__face face_bg face_bg-lc bg1"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
    </div>
    <div class="cube">
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-cb bg1"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face"></div>
      <div class="cube__face face_bg face_bg-rc bg6"></div>
    </div>
  </div>
  <div class="comp-3d comp-3d--o">
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-rb bg4"></div>
        <div class="cube__face face_bg face_bg-lb bg1"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-rt bg6"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-lb bg2"></div>
        <div class="cube__face face_bg face_bg-rb bg1"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-rb bg6"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-rt bg4"></div>
        <div class="cube__face face_bg face_bg-lt bg1"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-rb bg3"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-lt bg2"></div>
        <div class="cube__face face_bg face_bg-rt bg1"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-rt bg3"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-lb bg4"></div>
        <div class="cube__face face_bg face_bg-rb bg5"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-lt bg6"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-rb bg2"></div>
        <div class="cube__face face_bg face_bg-lb bg5"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face cube__face face_bg face_bg-lb bg6"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-lt bg4"></div>
        <div class="cube__face face_bg face_bg-rt bg5"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-lb bg3"></div>
      </div>
    </div>
    <div class="pos">
      <div class="cube">
        <div class="cube__face face_bg face_bg-rt bg2"></div>
        <div class="cube__face face_bg face_bg-lt bg5"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face"></div>
        <div class="cube__face face_bg face_bg-lt bg3"></div>
      </div>
    </div>
  </div>
</div>
</div>
 

Schließen

Bis dann, gutes Gelingen beim Einbau und nochmal besten Dank an Daishi!
Wolfgang

Antworten

#3 | RE: Bilder-Würfel mit Multi-Animation datum

26.11.2024 09:36

Ist ja irre - die Grafik an sich und die 620 Zeilen des Skripts.

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

#4 | RE: Bilder-Würfel mit Multi-Animation datum

26.11.2024 19:09

Hans58

Informationen anzeigen

Beiträge:	129
Registriert seit:	05.08.2008

Homepage:	Link
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Nicht angegeben
Likes	50

ich habe das seit Jahren so
https://www.freizeit-stuebchen.de/t89635...lassen-neu.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
/* DREHEN */
.drehen {
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 
 
/* Grafik rotieren */
.looper { animation: perspect 4s infinite linear }
@keyframes perspect {
   0% {transform:perspective(300px) rotateY(0deg)}
   25% {transform:perspective(300px) rotateY(90deg)}
   50% {transform:perspective(300px) rotateY(180deg)}
   75% {transform:perspective(300px) rotateY(270deg)}
   100% {transform:perspective(300px) rotateY(360deg)}
}
 

die Forencodes

Wolfgang findet das Top!

Antworten

#5 | Rotierender Bilder-Würfel mit Glüh- und Mouseovereffekten! datum

09.12.2024 20:31 (zuletzt bearbeitet: 12.12.2024 08:49)

Wolfgang

Administrator

Informationen anzeigen

Beiträge:	3865
Registriert seit:	10.12.2006
Blog:	Wolfgangs Blog

Homepage:	Nicht angegeben
Letzte Spende	Betrag € Forum Spende
Sternzeichen	Skorpion
Likes	1707

Rotierender Bilder-Würfel mit Glüh- und Mouseovereffekten!
Aktualisiert 12.12.2024

AnimationenBei Durchschauen von Animationen habe ich auf der Webseite von CodePen einen klasse Würfel mit Schrift und Glüheffekten gefunden!
Sieht sensationell aus, sehr beeindruckend, das mit CSS und ohne JavaScript!
Für eine effektvolle Darstellung von Bildern echt super und einzigartig!
Habe die CSS fürs Forum angepasst, die Schrift ausgetauscht und Bilder eingesetzt!

Was kann die neue Würfel-Animation?

Der rotierende Würfel präsentiert 4 beliebige Bilder mit Schatten und Glüheffekt.
Beim Mouseover eines Bildes, wird es nach vorne geschoben!
Die CSS ist klein und minimiert!
Das Eintragen der Bilder und die Einstellung der Größe, Farben und Geschwindigkeit wird durch "var" erleichtert.
Alle wichtigen Einstellungen sind am Anfang des Skripts zu finden. Ein aufwendiges Suchen nach den einzutragenden Stellen ist nicht erforderlich!
Neu! Auf der Testseite werden jetzt 6 verschiedene Würfel-Farben präsentiert!

Hier testen:

5. Bilder-Würfel mit Multi-Animationen in verschiedenen Farben: Bilder-Würfel mit Glüh- und Mouseovereffekten!

4. Rotierende Würfel-Multi-Animationen

Kann zum Testen in die kopiert werden!

In Zeile 3-6 werden beliebige Bilder eingetragen, die Größe ist unkritisch und sollte über 300px betragen!
In Zeile 8-11 können weitere Optionen, wie Größe, Farbe und Geschwindigkeit geändert und angepasst werden!
In Zeile 16 kann der Abstand des Würfels nach oben, nach rechts, nach unten und zum linken Rand bestimmt werden!
Über Zeile 14 kann der Würfel zentriert werden!
Zeile 104-112 bestimmt die Art der Rotation!

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
<style>
.CubeBodyBild {
  --Bild-1: url("https://files.homepagemodules.de/b104774/a_151_37e79f57.png");
  --Bild-2: url("https://files.homepagemodules.de/b104774/a_772_55f2de02.png");
  --Bild-3: url("https://files.homepagemodules.de/b104774/a_770_32776b0b.png");
  --Bild-4: url("https://files.homepagemodules.de/b104774/f30t1939p6297n2_diOExhNw.png");
  
  --Groesse: 300px;
  --Gluehfarbe: linear-gradient(#151515,#00ec00); /* Glühfarbe oberer Rand , Haupt-Glühfarbe */
  --Hintergrundfarbe: #050505; /* Farbe vom gesamter Hintergrund */
  --Geschwindigkeit: 30s;
  
  display: inline-flex;
  /*  justify-content: center; */
  align-items: center; 
  padding: 100px 100px 200px 150px;
  height: auto;
  width: 100%;
  background: var(--Hintergrundfarbe) !important;
}
.CubeBild {
  position: relative;
  margin: 0 calc(var(--Geschwindigkeit) / 2) ;
  width: var(--Groesse);
  height: var(--Groesse);
  transform-style: preserve-3d;
  animation: AnimateBild var(--Geschwindigkeit) linear infinite;
}
 
.CubeBild div {
  position:absolute;
  top: 0 ;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
 
.CubeBild div span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--Gluehfarbe);
  transform: rotateY(calc(90deg * var(--winkel))) translateZ(calc(var(--Groesse) / 2));
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}
.CubeBild div span h2 {
  position: absolute;
  text-align:center;
  color: white;
  transform: translateZ(calc(var(--Groesse) / 6));
  transition: all 0.5s;
  cursor: pointer;
}
.CubeBild div span:hover h2 {
  transform: translateZ(calc(var(--Groesse) / 3));
}
.CubeBild div span h2 {
  width: calc(var(--Groesse) / 1.2);    
  height: calc(var(--Groesse) / 1.2);
  background-size: calc(var(--Groesse) / 1.2) calc(var(--Groesse) / 1.2);
  background-repeat: no-repeat;
}
.CubeBild div span h2:nth-child(1){
  opacity: 0.5;
  transform: translateZ(0) translateY(calc(var(--Groesse) / 15)); 
  color: rgba(0, 0, 0, 0.7);
  filter: blur(2px) grayscale(50%);
}
.CubeTop {
  position:absolute;
  top: 0;
  left: 0;
  width: var(--Groesse);
  height: var(--Groesse);
  background: #222222; /* Deckelfarbe */
  transform: rotateX(90deg) translateZ(calc(var(--Groesse) / 2));
}
.CubeTop::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;    
  width: var(--Groesse);
  height: var(--Groesse);
  background: #00ff00; /* Boden-Glühfarbe */
  transform: translateZ(calc(var(--Groesse) * (-1.266)));
  filter: blur(20px);
 
  /* Bodenschatten-Glühfarbe */
  box-shadow: 0 0 120px rgba(0, 255, 0, 0.2),
    0 0 200px rgba(0, 255, 0, 0.4),
    0 0 300px rgba(0, 255, 0, 0.6),
    0 0 400px rgba(0, 255, 0, 0.8),
    0 0 500px rgba(0, 255, 0, 1)
}
 
@keyframes AnimateBild {
  0% {
    transform: rotateX(-30deg) rotateY(360deg);
    }
  50%{
      transform: rotateX(0deg) rotateY(0deg);
    }
  100%{
    transform: rotateX(-30deg) rotateY(-360deg);
    }
}
</style>
 
<div class="CubeBodyBild">
  <div class="CubeBild">
    <div class="CubeTop"></div>
    <div>
      <span style="--winkel:0">
        <h2 style="background-image: var(--Bild-1)"></h2> 
        <h2 style="background-image: var(--Bild-1)"></h2>
      </span>
      <span style="--winkel:1">
        <h2 style="background-image: var(--Bild-2)"></h2> 
        <h2 style="background-image: var(--Bild-2)"></h2>
      </span>
      <span style="--winkel:2">
        <h2 style="background-image: var(--Bild-3)"></h2> 
        <h2 style="background-image: var(--Bild-3)"></h2>
      </span>
      <span style="--winkel:3">
        <h2 style="background-image: var(--Bild-4)"></h2> 
        <h2 style="background-image: var(--Bild-4)"></h2>
      </span>
    </div>
  </div>
</div>
 

Schließen

Bis dann und gutes Gelingen beim Ausprobieren!
Wolfgang

Kipper-Spedition findet das Top!

Antworten

Moderations-Kommentar:

Beschreibung Farben hinzugefügt!

#6 | RE: Rotierender Bilder-Würfel mit Glüh- und Mouseovereffekten! datum

11.12.2024 09:33 (zuletzt bearbeitet: 11.12.2024 15:20)

Toll! Aber der Würfel braucht Platz um zu wirken.

PS: Beim Ausprobieren blieb der "Deckel" immer schwarz, obwohl ich die Farben geändert hatte.

Themen bei der Community für Transportunternehmer und Führungskräfte der Transport- und Logistikbranche:

Wolfgang findet das Top!

Antworten

#7 | RE: Rotierender Bilder-Würfel mit Glüh- und Mouseovereffekten! datum

11.12.2024 15:19 (zuletzt bearbeitet: 12.12.2024 09:36)

Rotierender Bilder-Würfel mit Glüh- und Mouseovereffekten!
Aktualisiert 12.12.2024

Zitat von Kipper-Spedition im Beitrag #6
Toll! Aber der Würfel braucht Platz um zu wirken.

PS: Beim Ausprobieren blieb der "Deckel" immer schwarz, obwohl ich die Farben geändert hatte.

Das stimmt, der Würfel braucht viel Platz.
Ich finde ihn einfach faszinierend und beeindruckend, aber ob er zum Einsatz kommt....?

Die Farben

Die Farben in Beitrag #5 sind alle ziemlich versteckt!

Der gesamte Hintergrund lässt sich über "var - Hintergrund" einstellen, hier Zeile 10 - #050505.
Die Deckelfarbe versteckt sich unter der Class "CubeTop" in Zeile 81 - #222222.
Dann gibt es noch die dunkle Glüh-Farbe am oberen Rand des Würfels, in Zeile 9 , im ersten Teil des Farbcodes "var - Gluehfarbe" - #151515.
Die Haupt-Glühfarbe Grün ist auch in Zeile 9, im zweiten Teil des Farbcodes versteckt - #00ec00.
Die Glühfarbe Grün am Boden, in Zeile 91 - #00ff00.
Und noch die Glühschattenfarbe Grün am Boden, in Zeile 96-100 - 0 0 ... rgba(0, 255, 0, ...).

Die Farbe in einer Abhängigkeit zu bringen ist schwierig!
Der Glüh-Effekt kann schnell verloren gehen, wenn die Farben zu hell werden!

Nachtrag:

Habe die Beschreibung zu den Farben noch angehängt und den Test-Würfel mit 6 verschiedenen Farben ausgerüstet!

Bilder-Würfel mit Multi-Animationen in 6 verschiedenen Farben:
Bilder-Würfel mit Glüh- und Mouseovereffekten!

Bis dann
Wolfgang

Antworten

Moderations-Kommentar:

Beschreibung der Farben hinzugefügt!

Gutes Online Radio gesucht - Weihnachtsradio! » « Sicherung der Forum-Inhalte

Ähnliche Themen

Antworten

Letzter Beitrag

Bewegte Bilder - Neue Idee und Inspiration
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi 4 07.12.2023 06:06
ichwersonst • Zugriffe: 632

Bild überlappt im Hintergrund - Fotoecken füe Bilder
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi

19.11.2023 20:27
von

Wolfgang • Zugriffe: 505

Bild mit Information
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten! von Daishi 1 10.09.2023 08:47
Wolfgang • Zugriffe: 412

Auswahlmenü Bild-Einstellungen und Bilder verlinken optisch anpassen!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

28.05.2023 12:56
von

Wolfgang • Zugriffe: 614

3D Decken - Karussell / 3D Bilder Galerie / 3D Lightbox / 3D ohne Namen
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Daishi

04.10.2022 06:25
von

Wolfgang • Zugriffe: 1207

Bilder aus "Datei anhängen" + "URL-Bilder" mit einem Klick öffnen & schließen! - Für alle Templates! - Teil 1-4
Erstellt im Forum Das neue Template Xobor (v6). von Wolfgang

21.11.2025 18:19
von

Dankeschön • Zugriffe: 4079

Bilder vergrößern per "Mouseover", mittels "CSS" oder "Tooltipps"
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

18.01.2020 17:44
von

Wolfgang • Zugriffe: 20911

Forum-Bilder mit einstellbarer Größe, Tooltipps und Beschreibung ausstatten - Teil 1-3!
Erstellt im Forum Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! von Wolfgang

08.06.2022 10:15
von

Wolfgang • Zugriffe: 5265

Der Treffpunkt für Hilfe, Tricks & Tipps » XOBOR-Foren und Homepages »

Alles für Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps! » Rotierende Animation von Bildern - Würfel Animation

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gefällt und Du Dich hier genauso wohlfühlst wie wir.

Um Dir und den anderen Mitgliedern das Bestmögliche bieten zu können, würden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras ergänzen.

Wenn Du uns dabei unterstützen möchtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

41%

Rotierende Animation von Bildern

Spezielle Würfel-Animation mit Bildern - Ein Geschenk von Daishi

Rotierender Bilder-Würfel mit Glüh- und Mouseovereffekten!Aktualisiert 12.12.2024

Rotierender Bilder-Würfel mit Glüh- und Mouseovereffekten!Aktualisiert 12.12.2024

Rotierender Bilder-Würfel mit Glüh- und Mouseovereffekten!
Aktualisiert 12.12.2024

Rotierender Bilder-Würfel mit Glüh- und Mouseovereffekten!
Aktualisiert 12.12.2024