3d

.cube .front { transform: rotateZ(90deg) translateZ(150px); }

.cube .top { transform: rotateX(90deg) translateZ(150px); }

.cube .bottom { transform: rotateX(-90deg) translateZ(150px);}

.cube .back { transform: rotateX(180deg) translateZ(150px); }

.cube .right { transform: rotateY(90deg) translateZ(150px);}

.cube .left { transform: rotateY(-90deg) translateZ(150px); }

Diese Seite stellt eine Vorbereitung und Übersicht für einen 3D Cube dar. Es gibt mehrere .container Elemente, in denen liegt jeweils ein .cube Element und darin ein div mit einem Bild. Das letztere div stellt eine Seite des Würfels dar und wird mit transform Eigenschaften gedreht und positioniert, je nachdem für welche Seite es gedacht ist. .front .back .left .right .top .bottom

Da die Bilder für die einzelnen Seite nicht direkt in dem .container Element liegen, welches die perspective Eigenschaft hat, muss im .cube Element transform-style: preserve-3d; zugewiesen werden, um die Perspektive an das Kindelement weiter zu geben.

Die .cube Elemente haben eine schwarze Hintergrundfarbe, um die Positionierung des darin liegenden img Bildes deutlich zu machen.

In einem nächsten Schritt wird es dann nur noch ein .container Element mit einem darin liegenden .cube Element geben, in dem die einzelnen Seiten Elemente integriert werden.

siehe Beispiel

HTML

<div class="container">
      <div class="cube" >
          <div class="front"><img src="img/ind_f_1.jpg"></div>
      </div>
</div>

CSS
.container {
    width: 300px;
    height: 300px;
    position: relative;
    margin: 0 auto 40px;
    perspective: 1500px;
    perspective-origin: -100% -100%;
}
.cube {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transform: translateZ(-150px);
    background-color: black;
    transition: transform 2s;
}
.cube > div {
    line-height: 0;
    position: absolute;
    width: 300px;
    height: 300px;
    border: 1px solid black;
    opacity: 0.5;   
}
.cube .front {
    transform: rotateZ(90deg) translateZ(150px);
}
.cube .back {
    transform: rotateX(180deg) translateZ(150px);
}
.cube .right {
    transform: rotateY(90deg) translateZ(150px);
}
.cube .left {
    transform: rotateY(-90deg) translateZ(150px);
}
.cube .top {
    transform: rotateX(90deg) translateZ(150px);
}
.cube .bottom {
    transform: rotateX(-90deg) translateZ(150px);
}

Cube transform