Who has experience in creating animations by type, like on the main page of the site SimilarWeb ?!
The task is to create an animation that rotates on its axis!

Screen:

enter image description here The visual solution of the problem will be seen on the test version of the site.
Thank you @ Gennady Zhurov and @Alexandr_TT !

    2 answers 2

    Use the transform-origin property. The coordinates of the transformation point are calculated from the upper left corner of the element. Rotate around the center of the sun.

     *{ box-sizing:border-box; } .solar-system{ background-color:#002; width:500px; height:200px; position:relative; } .sun{ width:50px; height:50px; border-radius:50%; background-color:yellow; box-shadow:0 0 20px 2px yellow; position:absolute; top:calc(50% - 25px); left:calc(50% - 25px); } .mercury-orbit{ width:130px; height:130px; border-radius:50%; border:1px solid rgba(255,255,255,.4); position:absolute; top:calc(50% - 65px); left:calc(50% - 65px); } .mercury{ border-radius:50%; position:absolute; width:10px; height:10px; background-color:gray; top:calc(50% - 5px); left:calc(50% - 70px); transform-origin:70px 5px; animation:4s mercury infinite linear; } @keyframes mercury{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } } 
     <div class="solar-system"> <div class="sun"></div> <div class="mercury-orbit"></div> <div class="mercury"></div> </div>

    • Gennady, thanks for the quality response and your efforts !! It turned out to be much simpler than I thought)) - Kobets Matviy

    svg + css

    To argue that it is better to CSS or SVG absolutely not constructive.
    This does not apply to a specific topic, but to the trend of requests to perform a particular task. Like this, - "Make me only on CSS or only on SVG"

    It is necessary to use both. Both of these specifications have enough penetration into each other and work fine together.

    Many are afraid of very long lines of SVG formulas, so I will try to make them in the style of CSS.

    Took as a basis a good answer @ Gennady Zhurov and tried to make a mix of CSS+SVG

     .solar-system { background-color: #002; width: 50%; height: 50%; } .sun { fill: yellow; filter: url(#dropShadow); } .mercury-orbit { stroke: rgba(255, 255, 255, .4); stroke-width: 1; fill: none; } .mercury { fill: crimson; filter: url(#dropShadow2); } 
     <div class="solar-system"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 400"> <defs> <filter id="dropShadow" x="-20%" y="-20%" width="150%" height="150%"> <feGaussianBlur stdDeviation="5" /> </filter> <filter id="dropShadow2" x="-20%" y="-20%" width="120%" height="120%"> <feGaussianBlur stdDeviation="2" /> </filter> </defs> <circle class="sun" cx="250" cy="175" r="25" /> <g> <animateTransform attributeName="transform" type="rotate" values="0 250 175;360 250 175" dur="12s" repeatCount="indefinite" /> <circle class="mercury-orbit" cx="250" cy="175" r="65" /> <circle class="mercury" cx="185" cy="175" r="6" /> </g> </div>

    Related Topic: Animation of the Solar System Planets

    • Thanks, here is the result of the work on the main page. Test version of the site -> XBOLT - Kobets Matviy