html knowhow

Würfel dreht horizontal

So sieht´s aus

Hier sehen Sie nichts. Sehen Sie das Logo links oben.

Quellcode

<html>
<head>

<style type="text/css">
.wrap {perspective: 800px; perspective-origin: 10% 100px; width: 50px; position: relative;left:35%; top:-100px }
.cube {position: relative; width: 200px; transform-style: preserve-3d;}
.cube div {position: absolute; width: 200px; height: 200px; border: 1px solid #000;}
.back {transform: translateZ(-100px) rotateY(180deg);}
.right {transform: rotateY(-270deg) translateX(100px);transform-origin: top right;}
.left {transform: rotateY(270deg) translateX(-100px);transform-origin: center left;}
.top {transform: rotateX(-90deg) translateY(-100px);transform-origin: top center;}
.bottom {transform: rotateX(90deg) translateY(100px);transform-origin: bottom center;}
.front {transform: translateZ(100px);}
@keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(360deg); }}
.cube {animation: spin 5s infinite linear;}
</style>
</head>

<body>
<div class="wrap">
<div class="cube">
<div class="front"><img src="../Bilder/HKhlogo.jpg" style="width: 200px; height: 200px;" alt="diedVIPs" class="auto-style23" /></div>
<div class="back"><img src="../Bilder/Life.jpg" style="width: 200px; height: 200px;" alt="diedVIPs" class="auto-style23" /></div>
<div class="left"><img src="../Bilder/Ambi.jpg" style="width: 200px; height: 200px;" alt="diedVIPs" class="auto-style23" /></div>
<div class="right"><img src="../Bilder/Ambi2.jpg" style="width: 200px; height: 200px;" alt="diedVIPs" class="auto-style23" /></div>
</div>
</div>
</body>

</html>

Kontakt Datenschutz Impressum