在HTML CSS JAVASCRIPT中创建洋甘菊

我想创造甘菊花，我有像这样的花纸

一,

二,

以及如何创造类似的东西 三,

有人能帮我吗？我创建了这个代码

კიდევ სცადე

但它看起来很像

四,

---

如何创建这个或任何人有这样的例子吗？我想做一个占卜甘菊，有星座网站，我需要这个。谢谢，如果有人帮助我，我可以在我找到的地方显示完整的工作代码。

定位前两个图像后，重置变换值的单个循环应该可以：

let ptl=document.querySelectorAll（“img:not（.center）”；
让旋转=360/ptl.长度；
设rdm=3；
让text=document.querySelector（“#text”）；
让单词=[“是”、“可能”、“否”]
函数resize（）{
让比例=document.body.offsetHeight/650；
document.body.style.transform=“缩放（“+scale+”）”
}
for（设i=0；i
正文{
背景：线性梯度（0，#5eba7d，#0077cc，#e1b604）；
高度：100vh；
}
div{
显示：网格；
高度：100vh；
对齐项目：居中；
证明内容：中心；
位置：相对位置；
}
#正文{
位置：相对位置；
}
img，
#正文{
网格行：1；
网格柱：1；
保证金：自动；
}
img：不是（.center）{
右侧填充：375px；
剪辑路径：多边形（0%100%，0%0%，40%0%，40%100%）；
}
img：悬停{
滤光片：亮度（105%）；
}

摘花
使用此代码并查看您的位置。非常感谢。另外，我想输出文本时，点击图像随机可以帮助我吗？例如，“是”或“否”可能在单击时带有随机数？也许，也许你可以提出另一个问题，以便更好地了解情况。当你提出这个问题时，我更新了代码段和代码笔，你可以将你的单词存储在数组单词中，然后随机挑选一个
<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>