Beispiel:CSS3 transform-rotate-Würfel.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>CSS-Würfel</title>
<style>
body {
margin-top: var(--size);
perspective: 800px;
perspective-origin: 50% 100px;
}
@keyframes dice-roll {
0% {
transform: rotateX(0) rotateY(0deg);
}
33%{
transform: rotateX(0.1turn) rotateY(.33turn);
}
66%{
transform: rotateX(-0.15turn) rotateY(.66turn);
}
100%{
transform: rotateX(0) rotateY(1turn);
}
}
x-cube {
--size: 100px;
position: relative;
display: block;
width: var(--size);
margin: 0 auto;
transform-style: preserve-3d;
animation: dice-roll 4s linear infinite;
}
x-cube>* {
position: absolute;
display: block;
width: var(--size);
height: var(--size);
text-align: center;
line-height: var(--size);
font-size: 2em;
background: #c82f04;
border: thin solid black;
color: white;
}
face-1 { /* vorne */
transform: translateZ(calc(var(--size) * 0.5));
}
face-3 { /* rechts */
transform: rotateY(-270deg) translateX(calc(var(--size) * 0.5));
transform-origin: top right;
}
face-4 { /*links */
transform: rotateY(270deg) translateX(calc(var(--size) * -0.5));
transform-origin: center left;
}
face-2 { /* oben */
transform: rotateX(90deg) translateY(calc(var(--size) * -0.5));
transform-origin: top center;
}
face-5 { /* Unten */
transform: rotateX(-90deg) translateY(calc(var(--size) * 0.5));
transform-origin: bottom center;
}
face-6 { /* hinten */
transform: translateZ(calc(var(--size) * -0.5)) rotateY(180deg);
}
</style>
</head>
<body>
<h1>CSS-Würfel</h1>
<x-cube>
<face-1>vorne</face-1>
<face-2>oben</face-2>
<face-3>rechts</face-3>
<face-4>links</face-4>
<face-5>unten</face-5>
<face-6>hinten</face-6>
</x-cube>
</body>
</html>
