diedVIPs

html knowhow

Drehender Würfel















Drehender Würfel

So sieht´s aus

CIRCLE TEXT
CURVED TEXT

Quellcode
<html>
<head>

<style type="text/css">
.container {position:relative; height: 100px; width:40%; text-align:center; left:300px}
.container .cube-container {perspective: 400px; }
.container .cube-container .cube {transform-style: preserve-3d; width: 150px; height: 150px; margin: 0px 0; }
.container .cube-container .cube.cube1 {animation: horizontal-spin 20s infinite linear;}
.container .cube-container .cube .box {width: 100%; height: 80%; position: absolute; }
.container .cube-container .cube .box.front {transform: translateZ(75px); border:1px solid green}
.container .cube-container .cube .box.back {transform: translateZ(-75px) rotateY(180deg); border:1px solid green}
.container .cube-container .cube .box.left {transform: rotateY(270deg) translateX(-75px); transform-origin: center left; border:1px solid green}
.container .cube-container .cube .box.right { transform: rotateY(-270deg) translateX(75px); transform-origin: top right; border:1px solid green}
@keyframes horizontal-spin { from { transform: rotateY(0);} to { transform: rotateY(360deg); }}
</style>
</head>

<body>
<div class="container">
<div class="cube-container">
<div class="cube cube1">
<div class="box box1 front"><img src="../Bilder/HKhlogo.png" style="width: 80%; height:auto;" /></div>
<div class="box box1 right"><img src="../Bilder/HKhlogo.png" style="width: 80%; height:auto;" /></div>
<div class="box box1 left"><img src="../Bilder/HKhlogo.png" style="width: 80%; height:auto;" /></div>
<div class="box box1 back"><img src="../Bilder/HKhlogo.png" style="width: 80%; height:auto;" /></div>
</div>
</div>
</div>
</body>

</html>







Kontakt    Datenschutz   Impressum