Hey there, I'm attempting to incorporate both rotation animation and perspective in CSS.
It seems that I can only get one or the other to work, as shown below:
.vinyl {
width: 200px;
display: block;
margin: auto;
opacity: 0.8;
transform: rotate3d(1,0,0,45deg)
}
Or like this:
.vinyl {
width: 200px;
display: block;
margin: auto;
opacity: 0.8;
/* transform: rotate3d(1,0,0,45deg); */
animation: rotation 2s infinite linear;
}
How can I combine both rotation animation and perspective so that it appears like the image is rotating with a perspective view?
You can find the full code here.
.vinyl {
width: 200px;
display: block;
margin: auto;
opacity: 0.8;
/* transform: rotate3d(1,0,0,45deg); */
animation: rotation 2s infinite linear;
}
.container{
transform-style: preserve-3d;
perspective: 350px;
}
@keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}<div class="container">
<img class = 'vinyl' src="https://picsum.photos/seed/picsum/200/300" alt="">
</div>