JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div id="drehfigur">
                                <div id="inner">
                                    <img class="spinning" src="http://ulrichbangert.de/div/webentwicklung//images/snail2.jpg" />
                                </div>
                            </div>

CSS

#drehfigur {
                                    position: relative;
                                    overflow: hidden;
                                    max-width: 800px;
                                    height: 220px;
                                }

                                    #drehfigur #inner {
                                        position: absolute;
                                        left: -20%;
                                        top: -50%;
                                        width: 200%;
                                        height: 200%;
                                        z-index: 500;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        animation: rot 10s linear infinite;
                                    }

                                        #drehfigur #inner img.spinning {
                                            width: 100%;
                                            height: auto;
                                        }

                                @keyframes rot {
                                    0% {
                                        transform: rotate(0deg);
                                    }

                                    100% {
                                        transform: rotate(360deg);
                                    }
                                }