css+js实现2d圆圈图标与3d视觉切换效果代码-html代码-BFW代码库

代码语言：html

代码描述：css+js实现2d圆圈图标与3d视觉切换效果代码，图标排列在一个圆圈上旋转，可切换三维空间视角角度查看。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anybody&family=Syne&display=swap" rel="stylesheet">
  
  
  
<style>
@layer base, demo, demosupport;

/* Register --angle. That way we can transition and animate it 😎 */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
/* Initial value for browsers that don’t support @property */
:root {
  --angle: 0deg;
}

/* Keyframes that animates the --angle value */
@keyframes adjust-angle {
  to {
    --angle: 360deg;
  }
}

/* Rotation animation */
:root {
  animation: adjust-angle linear 20s infinite;
}

/* The colored dots */
.dot {
  /* Spread the dots evenly over the circle.
	   We do this by dividing 360deg by the number of children.
       E.g. 360 degrees / 3 children = 120 degrees between each child element.	
	*/
  --offset-per-child: calc(360deg / (var(--nth-siblings) + 1));

  /* Each child will that offset into account, based its index.
	   E.g. - the 1st out of 3 children gets offset by 0 x 120deg = 0deg
	        - the 2nd out of 3 children gets offset by 1 x 120deg = 120deg
	        - the 3rd out of 3 children gets offset by 2 x 120deg = 240deg
	*/
  --angle-offset: calc(var(--nth-child) * var(--offset-per-child));

  /* Size it */
  display: block;
  width: var(--tracksize);
  aspect-ratio: 222/184;

  /* Center it */
  position: absolute;
  left: calc(50% - (var(--tracksize) / 2));
  top: calc(50% - (var(--tracksize) / 2));

  /* Adjust its position based on the --angle, while also taking the --angle-offset into account */
  translate: calc(cos((var(--angle) + var(--angle-offset))) * var(--radius))
    calc(sin((var(--angle) + var(--angle-offset))) * var(--radius) * -1);

  user-select: none;
}

.dot img {
  vertical-align: bottom;
  margin-bottom: 1px;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
  transition: all 0.25s;
}

.dot:hover img {
  scale: 1.2;
}

/* 3D */
#visual,
.dot {
  transition: transform 1s linear;
}
.wrapper {
  perspective: 100vmin;
  perspective-origin: bottom;
}
#visual {
  transform-style: preserve-3d;
}
.dot {
  transform-origin: 50% 100%;
}
body:has(#enable_3d:checked) {
  #visual {
    transform: rotateX(45deg);
  }
  .dot {
    transform: rotateX(-50deg) translateY(0px) scale(2);
  }
}

@layer demo {
  @layer visual {
    /* The visualization */
    #visual {
      /* Dimensions of the visualization */
      --radius: 30vmin;
      --tracksize: 8vmin;

      /* Make it a circle, based on the dimensions */
      width: calc(var(--radius) * 2 + var(--tracksize));
      aspect-ratio: 1;
      border-radius: 50%;
      border: var(--tracksize) solid transparent;

      /* Some generic positioning stuff */
      margin: 0 auto;
      position: relative;
    }

    #visual {
      border-color: #e0e0e0;
    }

    /* Inject a dot at the center of the visualization */
    #visual::after {
      content: "";
      --size: calc(var(--tracksize) / 2);

      /* Make it round */
      display: block;
      width: var(--size);
      aspect-ratio: 1;
      border-radius: 50%;

      /* Put it in the center */
      position: absolute;
      left: calc(50% - (var(--size) / 2));
      top: calc(50% - (var(--size) / 2));
      z-index: 2;

      /* Make it black */
      background: #333;
    }
  }
}

@layer demosupport {
  @layer layout {
    label,
    #controls,
    form {
      text-align: center;
    }
  }
}

/* Non-demo styles below */
@layer base {
  @layer reset {
    * {
      box-sizing: border-box;
    }
    body {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      height: 100%;
    }
  }
  @layer layout {
    html {
      max-width: 84ch;
      padding: 3rem 2rem;
      margin: auto;
      font-family: "Anybody", sans-serif;
    }
    body {
      display: grid;
      place-content: safe center;
      gap: 3rem;
    }

    footer {
      text-align: center;
      margin: 2rem 0;
    }

    html {
      font-family: Syne, sans-serif;
    }
    input,
    button {
      font-family: inherit;
    }

    a,
    a:visited {
      color: blue;
    }

    h2 {
      margin-top: 2em;
    }

    summary {
      cursor: pointer;
    }

    dd + dt {
      margin-top: 0.5em;
    }

    button {
      cursor: pointer;
    }

    footer {
      text-align: center;
      font-style: italic;
    }
  }

  @layer support {
    .no-support,
    .has-support {
      margin: 1em 0;
      padding: 1em;
      border: 1px solid #ccc;
    }

    .no-support {
      background-color: #ff00002b;
    }
    .no-support[data-level="warn"] {
      background-color: #ffff002b;
    }
    .has-support {
      background-color: #00ff002b;
    }
    .no-support,
    [data-show-when-no-support] {
      display: block !important;
    }
    .has-support,
    [data-show-when-has-support] {
      display: none !important;
    }
    :is(.has-support, .no-support) > :first-child {
      margin-top: 0;
    }
    :is(.has-support, .no-support) > :last-.........完整代码请登录后点击上方下载按钮下载查看