CSS3 Transform 3D

zur Seite Thema Transform | nächste Seite mit Perspektive |

Berühre den Bereich unten und der Transition Effekt wird ausgeführt. In diesem Beispiel wurde noch keine Perspektive definiert. Die 3 Elemente drehen sich jeweils um eine andere Achse x, y, z. Die folgende Seite hat Perspektive.

#wrap {
	border: 1px solid #A8925B;
	margin: 20px;
	background-color: #DFB76D;
	display: flex;
}
#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);
}