zur Seite Thema Transform | vorige Seite ohne Perspektive |
Die Perspektive wird dem Elternelement zugewiesen.
Es gibt die Eigenschaft perspective, die einen Wert erwartet, der den Abstand zum Betrachter definiert.
Die Eigenschaft perspective-origin erwartet 2 Werte, für die x-y Kooridinate des perspektivischen Mittelpunkts.
Man beachte, dass diese Perspektive Eigenschaften nicht zwangsläufig im gleichen Element eingefügt werden, in dem auch transition definiert ist, sondern in einem Elternelement, welches die animierten Elemente enthält.
Der einzige Unterschied zur vorigen Seite sind die beiden perspective- Zeilen im #wrap Selektor.
#wrap {
border: 1px solid #A8925B;
margin: 20px;
background-color: #DFB76D;
display: flex;
perspective: 800px;
perspective-origin: 50% 100px;
}
#wrap div {
flex: 1;
background-color: #FCE2A1;
border: 2px solid #854B92;
padding: 10px;
margin: 10px;
text-align:center;
transition: all 1s ease-in;
}
#wrap:hover .rotateX {
transform: rotateX(180deg);
}
#wrap:hover .rotateY {
transform: rotateY(180deg);
}
#wrap:hover .rotateZ {
transform: rotateZ(180deg);
}