HTML DIV drehen

Question

Wie kann ich ein DIV in der 2. oder 3. Dimension drehen?

Answer 1

Das kannst du mit der CSS Transform Eigenschaft und einer der rotateX, rotateY oder rotateZ Funktionen. Hier findest du ein Beispiel auf JSFiddle.

<style>
.container {
    width: 200px;
    height: 200px;
    position: relative;
    perspective: 1000px; /* Definiert die Perspektive des 3D-Umgebungsraums */
}

.box {
    width: 100%;
    height: 100%;
    background-color: #3498db;
    color: white;
    text-align: center;
    line-height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 1s; /* Fügt eine Transition für eine sanfte Animation hinzu */
}

.container:hover .box {
    transform: rotateY(180deg); /* Dreht das Element um die Y-Achse um 180 Grad */
}

.container:hover .box.other {
    transform: rotateX(180deg); /* Dreht das Element um die X-Achse um 180 Grad */
}
</style>

<div class="container">
  <div class="box">2 Dimension</div>
</div>

<div class="container">
  <div class="box other">3 Dimension</div>
</div>