transformした要素内のanchorタグをクリックしたら特定のページに遷移したい


題の通りです．hrefで指定したURLに要素をクリックしたら飛ぶようにしたいのですが，良い方法が見つかりません．

<https://codepen.io/matsubax/pen/yLMKRmX>

[code]

    body {
        text-align: center;
        background-color: #D7FFD7;
      }
      
      #menu {
        width: 150px;
        height: 150px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin: -75px 0 0 -75px;
        list-style: none;
        font-size: 200%;
      }
      
      .menu-button {
        opacity: 0;
        z-index: -1;
      }
      
      .menu-button {
        width: 140px;
        height: 140px;
        position: absolute;
        left: 40%;
        top: 40%;
        margin: -50px 0 0 -50px;
        border-radius: 0%;
        background: #424242;
        background-size: 100%;
        overflow: hidden;
        text-decoration: none;
        background-image: url("../img/plp_logo.png")
      }
      
      #menu:not(:target) > a:first-of-type,
      #menu:target > a:last-of-type {
        opacity: 1;
        z-index: 1;
      }
      
      #menu:not(:target) > .icon-plus:before,
      #menu:target > .icon-minus:before {
        opacity: 1;
      }
      
      .menu-item {
        width: 140px;
        height:  140px;
        position: absolute;
        left: 40%;
        line-height: 5px;
        top: 40%;
        margin: -50px 0 0 -50px;
        border-radius: 0%;
        background-color: #424242;
        transform: translate(0px, 0px);
        transition: transform 500ms;
        z-index: -2;
        transition: 0.5s;
      }
      
      .menu-item:hover {
        opacity: 0.5;
      }
      
      .menu-item a {
        color: #fff;
        position: relative;
        top: 30%;
        left: 0;
        text-decoration: none;
      }
      
      #menu:target > .menu-item:nth-child(3) {
        transform: rotate(36deg) translateY(-300px) rotate(-360deg) ;
        transition-delay: 0.2s;
        background-image: url("../img/menu/01.png");
        background-size: cover;
      }
    
      img {
        display: block;
      }
[/code]

[code]

    <div class="container">
      <ul id="menu">
        <a class="menu-button icon-plus" href="#menu"></a>
        <a class="menu-button icon-minus" href="#0"></a>
    
        <li class="menu-item">
          <a href="https://google.com"></a>
        </li>
      </ul>
    </div>
[/code]

お手数おかけしますが，上記のURLに実装コードが書いてあるので，見ていただけたらと思います．

中央の四角をクリックしますと，別の要素が出てくると思いますがその要素をクリックして特定のページに遷移させたいのですが，うまくいきません．

anchorタグにテキストを設定すれば遷移はうまくいくのですが，文字は入力したくないため使用しない予定です．また，srcを指定して画像を挿入すると同様にうまく遷移するのですが，cssのハイライトと画像がずれてしまうのでこちらも使用を控えたいと考えております．なるべくcss上でbackgroud-
imageを指定し，クリックしたら特定のページに遷移したいと考えているのですが，思いつかず質問させていただきました．

何かしらヒントをいただけないでしょうか．よろしくお願い致します．




javascriptで解決するといくつかの方法があるかと思いますが。  
今回の問題はcssとhtmlだけが前提でお答えします。  
ソースに見ると原因はクリックされている要素はanchorタグではなく、anchorの親要素のリストになっています。現時点anchorの表示状態はないのと同じで実際サイズはないですから。  
ランクは一つだけでしたらli要素を使わなくても大丈夫じゃないかと思います。  
そうしますと下記のような書き方はよろしいでしょうか。

[code]

          body {
            text-align: center;
            background-color: #d7ffd7;
          }
    
          #menu {
            width: 150px;
            height: 150px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -75px 0 0 -75px;
            list-style: none;
            font-size: 200%;
          }
    
          .menu-button {
            width: 140px;
            height: 140px;
            position: absolute;
            left: 40%;
            top: 40%;
            margin: -50px 0 0 -50px;
            border-radius: 0%;
            background: #424242;
            background-size: 100%;
            overflow: hidden;
            text-decoration: none;
            background-image: url("../img/plp_logo.png");
          }
    
          #menu:not(:target) > a:first-of-type,
          #menu:target > a:last-of-type {
            opacity: 1;
            z-index: 1;
          }
    
          #menu:not(:target) > .icon-plus:before,
          #menu:target > .icon-minus:before {
            opacity: 1;
          }
    
          .menu-item {
            width: 140px;
            height: 140px;
            position: absolute;
            left: 40%;
            line-height: 5px;
            top: 40%;
            margin: -50px 0 0 -50px;
            border-radius: 0%;
            background-color: #424242;
            transform: translate(0px, 0px);
            transition: transform 500ms;
            z-index: -2;
            transition: 0.5s;
          }
    
          .menu-item:hover {
            opacity: 0.5;
          }
    
          .menu-item a {
            color: #fff;
            position: relative;
            top: 30%;
            left: 0;
            text-decoration: none;
          }
    
          #menu:target > .menu-item:nth-child(3) {
            transform: rotate(36deg) translateY(-300px) rotate(-360deg);
            transition-delay: 0.2s;
            background-image: url("../img/menu/01.png");
            background-size: cover;
          }
    
          img {
            display: block;
          }
[/code]

[code]

      <body>
        <div class="container">
          <ul id="menu">
            <a class="menu-button icon-plus" href="#menu"></a>
            <a class="menu-button icon-minus" href="#0"></a>
            <a class="menu-item" href="https://google.com"></a>
          </ul>
        </div>
      </body>
[/code]




aタグを同四角形と同じ大きさにしてしまえば良いのではないでしょうか。

[code]

    .menu-item a {
      color: #fff;
      position: relative;
      width: 140px;            /* <-- 追加 */
      height: 140px;          /* <-- 追加 */
      display: inline-block;  /* <-- 追加 */
      text-decoration: none;
    }
    
[/code]

直接本質問とは関係ないかもしれないですが、下記を参考にしました。  
<https://stackoverflow.com/a/29667918/1979953>

