CSS Spin Horizontal animation effect
CSS Spin Horizontal animation
Rotate an HTML element in the 3D horizontal plane using the transform#scale CSS transform function.
<style>
.spin-horizontal {
/* Uncomment as needed. */
/* width: 100px; */
/* height: 100px; */
/* background-color: deeppink; */
animation-name: spin-horizontal-3d;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes spin-horizontal-3d {
0% { transform: scale(1,1) translate(-100px, 0); }
5% { transform: scale(0.9, 1) translate(-15px, 0); }
5.5% { transform: scale(1, 1) translate(-0px, 0); }
50% { transform: scale(0, 0) translate(300px, 30px); }
51% { transform: scale(0, 0) translate(-300px, 0); }
}
</style>
- If you cannot see your HTML element when using our code, you may need to set a width and or height, or background on your target HTML element using CSS. Just uncomment the CSS properties in our code as needed.
- Remove the HTML style tag as needed.
- Change values in the code such as animation-duration as needed.
Animation effects source code licenced under
MIT Licence