Rotate Rotate
Mit rotate3D() wird die Richtung der Z-Achse bestimmt.
Mit CSS animationen wird mittels rotateZ() die Z-Achse ständig gedreht.
img {
width: 200px;
height: auto;
}
div {
width: min-content;
}
.parent {
border: 1px solid #000;
perspective: 500px;
perspective-origin: 50% 60%;
}
.box1 {
transform: perspective(400px) rotate3d(1, -1, 0, 30deg) rotateZ(0deg);
animation: zloop1 10s infinite linear;
}
.box2 {
transform: perspective(600px) rotate3d(1, 1, 0, -70deg) rotateZ(0deg);
animation: zloop2 3s infinite linear;
}
.box3 {
transform: perspective(400px) rotate3d(1, .5, 0, 50deg);
animation: zloop3 6s infinite linear;
}
.box4 {
transform: perspective(400px) rotate3d(1, 1, 0, 70deg);
animation: zloop 3s infinite linear;
}
@keyframes zloop1 {
0% {
transform: perspective(400px) rotate3d(1, -1, 0, 30deg) rotateZ(0deg);
}
100% {
transform: perspective(400px) rotate3d(1, -1, 0, 30deg) rotateZ(720deg);
}
}
@keyframes zloop2 {
0% {
transform:perspective(600px) rotate3d(1, 1, 0, -70deg) rotateZ(0deg);
}
100% {
transform:perspective(600px) rotate3d(1, 1, 0, -70deg) rotateZ(720deg);
}
}
@keyframes zloop3 {
0% {
transform:perspective(400px) rotate3d(1, .5, 0, 50deg) rotateZ(0deg);
}
100% {
transform:perspective(400px) rotate3d(1, .5, 0, 50deg) rotateZ(720deg);
}
}
@keyframes zloop {
0% {
transform: perspective(400px) rotate3d(1, 1, 0, 70deg) rotateZ(0deg);
}
100% {
transform: perspective(400px) rotate3d(1, 1, 0, 70deg) rotateZ(720deg);
}
}