<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Flor que se abre</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #cceeff;
  }
  .flower {
    position: relative;
    width: 200px;
    height: 200px;
    cursor: pointer;
  }
  .petal {
    position: absolute;
    background: pink;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    width: 50px;
    height: 80px;
    transform-origin: bottom center;
    transition: all 0.5s ease;
  }
  /* Pétalos en 6 posiciones (360°/6 = 60°) */
  .petal:nth-child(1) { top: 20px; left: 75px; transform: rotate(0deg); }
  .petal:nth-child(2) { top: 40px; left: 120px; transform: rotate(60deg); }
  .petal:nth-child(3) { top: 90px; left: 130px; transform: rotate(120deg); }
  .petal:nth-child(4) { top: 130px; left: 90px; transform: rotate(180deg); }
  .petal:nth-child(5) { top: 110px; left: 40px; transform: rotate(240deg); }
  .petal:nth-child(6) { top: 60px; left: 30px; transform: rotate(300deg); }

  /* Centro de la flor */
  .center {
    position: absolute;
    top: 90px;
    left: 90px;
    width: 40px;
    height: 40px;
    background: yellow;
    border-radius: 50%;
    z-index: 10;
  }


  /* Estado abierto: pétalos más grandes y un poco movidos */
  .flower.open .petal {
    width: 70px;
    height: 110px;
  }
  .flower.open .petal:nth-child(1) { top: 10px; left: 65px; }
  .flower.open .petal:nth-child(2) { top: 25px; left: 110px; }
  .flower.open .petal:nth-child(3) { top: 80px; left: 120px; }
  .flower.open .petal:nth-child(4) { top: 130px; left: 95px; }
  .flower.open .petal:nth-child(5) { top: 120px; left: 30px; }
  .flower.open .petal:nth-child(6) { top: 60px; left: 20px; }
</style>
</head>
<body>
  <div class="flower" id="flower">
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="petal"></div>
    <div class="center"></div>
  </div>

  <script>
    const flower = document.getElementById('flower');
    flower.addEventListener('click', () => {
      flower.classList.toggle('open');
    });
  </script>
</body>
</html>