0

i want to create Chamomile flower, i have flower paper like this

1.

1

2 2

and what to create something like 3

3

can anyone help me ? i created this code 

<div class="flower-center" style="width: 139.169px; height: 139.169px; top: 125.333px; left: 262.927px;"><img src="{% static 'css/covers/4/center.png' %}" alt="Серцевина цветка"></div>
                    <div class="petal1" style="">
                        <img class="petal" onclick="oneClick(this)" src="{% static 'css/covers/4/petal1.png' %}" alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal2" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal3" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal4" style="">
                        <img class="petal" onclick="oneClick(this)" src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal5" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal6" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal7" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal8" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal9" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}" alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal10" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal11" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal12" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal13" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal14" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal15" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal16" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal17" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal18" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}" alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal19" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal20" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal21" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal22" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}" alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal23" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal24" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal25" style="">
                        <img class="petal" onclick="oneClick(this)" src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal26" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}" alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal27" style="">
                        <img class="petal" onclick="oneClick(this)" src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal28" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal29" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal1.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                    <div class="petal30" style="">
                        <img class="petal" onclick="oneClick(this)"  src="{% static 'css/covers/4/petal2.png' %}"  alt="Лепесток" style="width: 206.79px;">
                    </div>
                </div>
                <button onclick="location.reload();" style="display: none; position:absolute;bottom:20px;left:0;right:0;margin:auto;" class="view-shetavseba">კიდევ სცადე</button>
            </div>
        </div>
    </div>

but it's lookalike like

4

4

How to create this or anyone has example something like that ?I want to do a divination on chamomile, have horoscope website that's i need this. Thanks if anyone help me i can show full working code where i find this.

Improve this question
1

1 Answer 1

Reset to default
1

once the first 2 image are positionned , a single loop to reset a transform value should do :

let ptl = document.querySelectorAll("img:not(.center)");
let rot = 360 / ptl.length;
let rdm = 3;
let text = document.querySelector("#text");
let words = ["yes", "perhaps", "no"]

function resize() {
  let scale = document.body.offsetHeight / 650;
  document.body.style.transform = "scale(" + scale + ")"
}
for (let i = 0; i < ptl.length; i++) {
  ptl[i].addEventListener("click", function() {
    this.style.opacity = "0";
    this.style.pointerEvents = "none";
    let x = Math.floor(Math.random() * words.length);
    text.innerHTML = words[x];
  });
  ptl[i].style.transform = "rotate(" + i * rdm * rot + "deg)";
}

window.onresize = resize;
window.onload = resize();
body {
  background: linear-gradient(0, #5eba7d, #0077cc, #e1b604);
  height: 100vh;
}

div {
  display: grid;
  height: 100vh;
  align-items: center;
  justify-content: center;
  position: relative;
}

#text {
  position: relative;
}

img,
#text {
  grid-row: 1;
  grid-column: 1;
  margin: auto;
}

img:not(.center) {
  padding-right: 375px;
  clip-path: polygon(0% 100%, 0% 0%, 40% 0%, 40% 100%);
}

img:hover {
  filter: brightness(105%);
}
<div>
  <b id=text>pick a petal</b>
  <img src="https://i.sstatic.net/coLCe.png" class="center">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
  <img src="https://i.sstatic.net/YXBo4.png">
</div>

pen to play with : https://codepen.io/gc-nomade/pen/PozLqLe

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thank you . also i want to output text when click image randomly can you help me ? for example , "yes" or "no"
possibly with a random number on click ? codepen.io/gc-nomade/pen/PozLqLe
probably, maybe you can make another question for a better visibility.
while you go ask for that , i updated the snippet and codepen, you can store your words in the array words and randomly pick one out

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.