mehrere kleine Bilder um ein großes Bilde rotieren lassen.... CSS ?

  • Hallo ich weiß nicht ob ich hier damit richtig bin aber ich frage einfach mal nach


    und zwar hab ich ein PNG (ist ein link zu einem Modal) in der größe 300px x 300px - (es ist aber ein rundes Bild mit transparentem Hintergrund) dieses ist per css definiert und dreht sich als animation im uhrzeigersinn


    jetzt habe ich noch 13 kleine Bilder (auch rund größe 74px x 74px) dieses würde ich gerne um das große bild rotieren lassen gegen den uhrzeigersinn

    ist sowas mit css möglich ?


    wenn ja wäre ich froh wenn mir da mal jemand helfen könnte,

    wenn nicht -> wie würdet ihr sowas realisieren


    danke schonmal für eure antworten

  • Ja, das ist mit CSS möglich. Mein erster Ansatz

    • nur CSS
    • Werte müssen händisch berechnet werden

    CSS:

    HTML:

    Code
    1. <div id="rotwrapper">
    2. <img id="centerimg" src="images/earth-transparent.png">
    3. <div class="imgwrapper nr1">
    4. <img src="images/moon-transparent.png">
    5. </div>
    6. <div class="imgwrapper nr2">
    7. <img src="images/moon-transparent.png">
    8. </div>
    9. </div>

    Das muss dann erweitert werden bis es 13 Bilder sind.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von Sempervivum ()

  • Mein zweiter Ansatz:

    • Die Werte werden automatisch mit Javascript berechnet und das CSS und das HTML generiert

    Templates und CSS:

    HTML und Javascript:

    Was noch fehlt: Unterschiedliche Bilder. Am besten die URLs in einem Array ablegen und in das Template einfügen.

  • hey danke coole sache, hab nur noch ein anliegen wie genau fügt man den in die Javascript Version weitere bilder ein?

    Bei dem anderen hab ich es verstanden.


    Und ist es möglich den abstand der kleinen bilder zum großen zu verkleinern oder ist das durch die Bildgröße vorgegeben?

  • Zitat

    wie genau fügt man den in die Javascript Version weitere bilder ein?

    Die Anzahl der Bilder kannst du mit der Variablen nrimg einstellen. Alles andere wird dann automatisch berechnet. Aber ich schrieb ja oben schon, dass Du wahrscheinlich verschiedene Bilder haben willst, Dann musst Du diese in einem Array ablegen und in der for-Schleife in das HTML eintragen. Ich wollte dir ja auch noch etwas zu tun lassen ;D


    Zitat

    Und ist es möglich den abstand der kleinen bilder zum großen zu verkleinern oder ist das durch die Bildgröße vorgegeben?

    Ja, der Abstand wird durch die Größe der beiden Container festgelegt:

    Code
    1. #rotwrapper {
    2. display: flex;
    3. align-items: center;
    4. justify-content: center;
    5. background-color: lightblue;
    6. width: 600px;
    7. height: 600px;
    8. position: relative;
    9. }

    und

    Code
    1. .imgwrapper {
    2. position: absolute;
    3. top: 0;
    4. left: 0;
    5. width: 600px;
    6. height: 600px;
    7. transform-origin: center center;
    8. }

    Wenn Du width und height verkleinerst, rücken die kleinen Bilder näher an das zentrale.

    Und diese musst Du anpassen:

    Code
    1. #rotwrapper .imgwrapper img {
    2. width: 74px;
    3. height: 74px;
    4. position: absolute;
    5. top: 0;
    6. left: 263px;
    7. }

    und zwar left, so dass das Bild genau in der Mitte ist. Hier: 600px/2 - 74px/2

  • geiles Ding funktioniert einwandfrei bis auf eine kleinigkeit

    ich hatte das center img mit einen link belegt zu einem Bootstrap modal :-( das funktioniert irgendwie nicht mehr

    Code
    1. <a data-toggle="modal" data-target="#step1"><img src="images/centerimg.png"></a>

    und zu dem anderen .... also ich habe jetzt das erste genommen, da ich zwar einen array hinbekommen würde aber mit der for schleife habert es dann doch noch...bin noch am lernen in sachen php.

  • Du brauchst nur das a-Tag um das centerimg herum zu legen, dann sollte es funktionieren. Wichtig ist, dass diese Bild die ID centerimg hat:

    Code
    1. <a data-toggle="modal" data-target="#step1"><img src="images/centerimg.png" id="centerimg"></a>
  • ja das habe ich gemacht aber ich habe den eindruck er will das letzte kleine eingefügte bild ansprechen, das wird jedenfalls makiert,


    warum auch immer

  • also ich habe den Code jetzt im wrapper als letztes eingefügt und siehe da es funktioniert.....


    herzlichen dank das ging ja auch übel fix....:-)

  • Ich denke, jetzt verstehe ich: Die Container der kleinen Bilder liegen ja über dem Centerimg und überdecken es. Verschiebe das a-tag mit dem Centerimg an das Ende, hinter die Divs.

  • Oder gib den Imagewrappern pointer-events:none:

    Code
    1. .imgwrapper {
    2. pointer-events: none;
    3. position: absolute;
    4. top: 0;
    5. left: 0;
    6. width: 600px;
    7. height: 600px;
    8. transform-origin: center center;
    9. }