diedVIPs

html knowhow

Würfel der rotiert















Würfel der rotiert

So sieht´s aus

Quellcode
<html>
<head>

<style type="text/css">
.cube {position: relative; width: 0px; margin: 0 auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; animation: drehung 5s infinite linear;}
.cube-wrap {-webkit-perspective: 200px; -webkit-perspective-origin: 50% 100px; perspective: 1000px; perspective-origin: 50% 100px;}
.cube div {position: absolute; width: 100px; height: 100px; }
.vorne {transform: rotateY(-180deg) translateZ(100px);}
.hinten {transform: rotateY(180deg) translateZ(-0px);}
.rechts {transform: rotateY(-270deg) translateX(100px); transform-origin: bottom right;}
.links {transform: rotateY(270deg) translateX(-100px); transform-origin: center left;}
.oben {transform: rotateX(90deg) translateY(-100px); transform-origin: top center;}
.unten {transform: rotateX(-90deg) translateY(100px); transform-origin: bottom center;}
@keyframes drehung {
0% { transform: rotate3d(1, 1, 1, 0);}
100% {transform: rotate3d(1, 1, 1, 360deg); } }
</style>
</head>

<body>
<div class="cube-wrap">
<div class="cube">
<div class="vorne"> <img src="../Bilder/HKhlogo.jpg" style="width: 100%; height:auto;" alt="diedVIPs" /></div>
<div class="hinten"><img src="../Bilder/HKhlogo.jpg" style="width: 100%; height:auto;" alt="diedVIPs" /></div>
<div class="oben"> <img src="../Bilder/HKhlogo.jpg" style="width: 100%; height:auto;" alt="diedVIPs" /></div>
<div class="unten"> <img src="../Bilder/HKhlogo.jpg" style="width: 100%; height:auto;" alt="diedVIPs" /></div>
<div class="links"> <img src="../Bilder/HKhlogo.jpg" style="width: 100%; height:auto;" alt="diedVIPs" /></div>
<div class="rechts"><img src="../Bilder/HKhlogo.jpg" style="width: 100%; height:auto;" alt="diedVIPs" /></div>
</div>
</div>
</body>

</html>







Kontakt    Datenschutz   Impressum