Wie erstellt man einen animierten 3D Würfel [HTML & CSS Anleitung]

von | Jun 20, 2023 | Design | 0 Kommentare

Schlagwörter: CSS - CSS3 - HTML

Heute möchte ich euch mal zeigen wie man einen 3D Würfel mit HTML und CSS erstellen kann, ihm einen coolen glühenden Schatten gibt und ihn dann animiert also drehen lässt.

So eine kleine Animation kann jede Webseite massiv aufwerten und einen WOW beim Besucher erzeugen.

Video

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
 <section>
      <div class="container">
        <div class="wuerfel">
          <div class="top"></div>
          <div>
            <span style="--i: 0"></span>
            <span style="--i: 1"></span>
            <span style="--i: 2"></span>
            <span style="--i: 3"></span>
          </div>
        </div>
      </div>
    </section>

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
88
89
90
91
92
93
94
95
96
:root {
  --bg: #14213d;
  --farbe1: #fca311;
  --farbe2: #c9820e;
}
 
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  background: var(--bg);
  min-height: 100vh;
  overflow: hidden;
}
 
section {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: perspective(700px);
}
.container {
  position: absolute;
  transform-style: preserve-3d;
  top: 250px; /* abstand von oben*/
}
 
.container .wuerfel {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: animieren 20s linear infinite;
}
 
.container .wuerfel div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
 
.container .wuerfel div span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(var(--farbe1), var(--farbe1), var(--farbe2));
  transform: rotateY(calc(90deg * var(--i))) translateZ(100px);
}
 
.container .wuerfel .top {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: var(--farbe1);
  transform: rotateX(90deg) translateZ(100px);
 
  display: flex; /* before position einmitten*/
  justify-content: center;
  align-items: center;
}
 
.container .wuerfel .top::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: var(--farbe1);
  transform: translatez(-400px);
  box-shadow: 0 0 120px rgba(201, 130, 14, 0.2),
    0 0 200px rgba(201, 130, 14, 0.4), 0 0 300px rgba(201, 130, 14, 0.6),
    0 0 400px rgba(201, 130, 14, 0.8), 0 0 500px rgba(201, 130, 14, 1);
  filter: blur(50px);
}
 
@keyframes animieren {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse





0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert