css控制器代码实现效果如下点击中间图片，实现代码变大以及反转 transform: translate(0%, 0%)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      a{
        text-decoration: none;
      }
      body{
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
      }
      body::after{
        content:'动画';
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        opacity: .5;
      }
      main{
        position: relative;
        left: 0;
        top: 0;
        width: 100%;
        height: calc(100%-70px);
        flex: 1;
        overflow: hidden;
      }
      main>div{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform: translate(0,-100%);
        transition: all 1.5s;
        z-index:10;
        display: grid;
        place-items: center;
      }
      .tarbar {
        position: absolute;
        font-size: 10px;
        bottom: 0;
        left: 0;
        display: flex;
        background: #2c3e50;
        height: 10vh;
        width: 100%;
        justify-content: center;
        align-items: center;
        z-index: 11;
      }
              
      .tarbar>a {
          display: inline-block;
          flex: 1;
          color: white;
          font-weight: bold;
          text-align: center;
          height: 100%;
          line-height: 10vh;
          border-right: 1px solid #aaa;
      }
      
      .tarbar>a:hover {
          opacity: .8;
      }
      
      .tarbar>a:last-child {
          border-right: none;
      }
      /* target :选取当前的 */
      main>div:target{
        opacity: 1;
        transform: translate(0%,0%);
      }
      main>div:nth-of-type(1):target {
          background: #3498db;
      }
      
      main>div:nth-of-type(2):target {
          background: #9b59b6;
      }
      
      main>div:nth-of-type(3):target {
          background: #16a085;
      }
      
      main>div:nth-of-type(4):target {
          background: #e74c3c;
      }
      main>div label {
          color: white;
          opacity: .8;
          font-size: 3rem;
          transform: translate(-100vw, 0%) scale(0.2);
          filter: blur(25px);
          /* 带不带all区别就是：transition：width|height。
          如果过度动画这里是transition:width 1s；
          则鼠标滑过div的宽会有1.5秒的动画，
          而高会立刻撑大像素，没有过渡时间。 */
          transition: all 1.5s;
          transition-timing-function: ease-out;
      }
      main>div:target label {
        /* rotate(1080deg) 点击即旋转 */
          transform: translate(0%, 0%) scale(1) rotate(1080deg);
          filter: none;
      }
      
      main>div:target label:hover {
          cursor: pointer;
          transform: translate(0%, 0%) scale(1.5) rotateY(360deg);
          filter: none;
      }
      
      main>div:target label:active {
          transform: translate(0%, 0%) scale(1.5) rotateY(180deg);
          filter: none;
      }

      </style>
</head>
<body>
<main>
  <div id="home"><label>HOME</label></div>
  <div id="category"><label>CATEGORY</label></div>
  <div id="cart"><label>CART</label></div>
  <div id="about"><label>ABOUT</label></div>
</main>
  <div class="tarbar">
    <a href="#home">HOME</a>
    <a href="#category">CATEGORY</a>
    <a href="#cart">CART</a>
    <a href="#about">ABOUT</a>
  </div>
</body>

</html>
实现效果如下点击中间图片，实现代码变大以及反转
transform: translate(0%, 0%) scale(1.5) rotateY(180deg); 实现元素选择，以及选中后样式改变状态
div:target label:hover