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