Skip to content

Create Chamomile in HTML CSS JAVASCRIPT

Sham Dhiman

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.

Advertisement

Answer

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.stack.imgur.com/coLCe.png" class="center">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
  <img src="https://i.stack.imgur.com/YXBo4.png">
</div>

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

G-Cyrillus
User contributions licensed under: CC BY-SA
7 People found this is helpful