|
|
Drehender Würfel | So sieht´s aus |
 |
| 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 | |