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

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

代码语言：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(--tracks.........完整代码请登录后点击上方下载按钮下载查看