Würfel dreht horizontal auf Spitze
<head>
<style type="text/css">
.dice {position: relative; transform-style: preserve-3d; transform: rotateY(185deg) rotateX(150deg) rotateZ(315deg); animation: rotate 15s linear;}
.side {content: ""; width: 100%; height: 100%; position: absolute; display: flex; align-items: center; justify-content: center;}
.base {transform: translateY(73px) rotateX(90deg); border: 0;}
.one {transform: translateZ(100px); }
.two {transform: translateX(-100px) rotateY(-90deg); }
.three {transform: translateY(100px) rotateX(90deg); }
.four {transform: translateY(-100px) rotateX(90deg); }
.five {transform: translateX(100px) rotateY(90deg); }
.six {transform: translateZ(-100px); }
@keyframes rotate {from {transform: rotateY(0) rotateX(30deg) rotateZ(30deg);} to {transform: rotateY(360deg) rotateX(30deg) rotateZ(30deg);}}
</style>
</head>
<body>
<center><div class="dice">
<div class="side one"><img src="../Bilder/HKhlogo.jpg" style="width: 200px; height: 200px;" alt="diedVIPs"/></div>
<div class="side two"><img src="../Bilder/life.jpg" style="width: 200px; height: 200px;" alt="diedVIPs" /></div>
<div class="side three"><img src="../Bilder/ambi.jpg" style="width: 200px; height: 200px;" alt="diedVIPs" /></div>
<div class="side four"><img src="../Bilder/ambi2.jpg" style="width: 200px; height: 200px;" alt="diedVIPs" /></div>
<div class="side five"><img src="../Bilder/astern.jpg" style="width: 200px; height: 200px;" alt="diedVIPs" /></div>
<div class="side six"><img src="../Bilder/andie macdowell.jpg" style="width: 200px; height: 200px;" alt="diedVIPs" /></div>
</div>
</center>
</body>
</html>