Berühre das dritte Bild
Im dritten Bild wechselt der erste Wert
der x Achse stetig von 0 nach 1
und der y Wert von 1 nach 0.
nach einer Sekunde entspricht die Drehung
dem letzten Bild.
.parent {
border: 1px solid #000;
perspective: 500px;
perspective-origin: 50% 60%;
}
.box1 {
transform: rotate3d(1, 0, 0, 70deg);
}
.box2 {
transform: rotate3d(0, 1, 0, 70deg);
}
.box3 {
transform: rotate3d(0, 1, 0, 70deg);
transition: transform 2s;
}
.box3:hover {
transform: rotate3d(1, 0, 0, 70deg);
}
.box4 {
transform: rotate3d(0.5, 0.5, 0, 70deg);
}