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);
}
} |
0 Kommentare