Beispiel:CSS3 transform-rotate-Würfel.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!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>