/*centering*/
      body {
        background-color: rgb(226, 226, 226);
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;  /*列剧中*/
        justify-content: center;  /*行剧中*/
      }

      /*proportion and perspective*/
      #scene {
        width: 200px;
        height: 200px;
        perspective: 600px;
        perspective-origin: center top;
      }

      .flower {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
      }

      .petal {
        position: absolute;
        width: 200px;
        height: 200px;
        /* make squares into circles */
        border-radius: 100px;
        opacity: 0.9;
        background: linear-gradient(yellow, violet);
        background-size: 200px 200px;
      }
      /* 图片 */
      #Audi {
        background-image: url('./image/Audi.png');
      }
      #kido-leiHan {
        background-image: url('./image/kido-leiHan.png');
      }
      #Green-Badge {
        background-image: url('./image/Green-Badge.jpg');
      }
      #kido-yuCheng {
        background-image: url('./image/kido-yuCheng.png');
      }
      #Olympic-rings {
        background-image: url('./image/Olympic-rings.jpg');
      }
      #Windows {
        background-image: url('./image/Windows.png');
      }

      /* center of the flower */
      .center {
        position: absolute;
        width: 100px;
        height: 100px;
        border-radius: 50px;
        bottom: 100px;
        background: radial-gradient(yellow, violet);
        transform: rotateX(90deg)  translateX(50px) translateZ(-140px);
      }

      /* petal 1 */
      .petal:nth-child(2) {
        transform: rotateY(0deg) translateZ(140px) rotate3d(-2, 0.5, 0, 45deg);
        /* transform: rotateY(0deg) translateZ(140px) rotate3d(-1, 0.5, 0, 45deg); */
        /* transform: translateZ(140px); */
      }

      /* petal 2 */
      .petal:nth-child(3) {
        transform: rotateY(60deg) translateZ(140px) rotate3d(-2, 0.5, 0, 45deg);
        /* transform: translateZ(-140px); */
      }

      /* petal 3 */
      .petal:nth-child(4) {
        transform: rotateY(120deg) translateZ(140px) rotate3d(-2, 0.5, 0, 45deg);
      }

      /* petal 4 */
      .petal:nth-child(5) {
        transform: rotateY(180deg) translateZ(140px) rotate3d(-2, 0.5, 0, 45deg);
      }

      /* petal 5 */
      .petal:nth-child(6) {
        transform: rotateY(240deg) translateZ(140px) rotate3d(-2, 0.5, 0, 45deg);
      }

      /* petal 6 */
      .petal:nth-child(7) {
        transform: rotateY(300deg) translateZ(140px) rotate3d(-2, 0.5, 0, 45deg);
      }

      /*  */
      #scene {
        transition: perspective 1s;
      }

      #scene:hover {
        perspective: 400px;
      }

      /*animation*/
      @keyframes appear {
        from {opacity: 0;}
        to {opacity: 1;}
      }

      #scene {
        animation-name: appear;
        animation-duration: 4s;
      }

      @keyframes rotate{
        from {transform: rotateY(0deg);}
        to {transform: rotateY(360deg);}
      }

      .flower {
        animation-name: rotate;
        animation:rotate 10s infinite linear; 
      }

      .flower:hover {
        animation-play-state: paused;
      }