js+css实现4阶三维魔方取色器代码-html代码-BFW代码库

js+css实现4阶三维魔方取色器代码

代码语言：html

所属分类：其他

代码描述：js+css实现4阶三维魔方取色器代码，旋转魔方，点击魔方的色块就能选择颜色值。

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

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

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

  
  
<style>
a { color: inherit; }
body {
  --check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="%23fff" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 12l5 5l10 -10"/></svg>');
  background-color: var(--bg, #B71C1C);
  color: color-contrast(var(--bg, #B71C1C) vs black, white);
  font-family: ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  height: 100dvh;
  perspective: 40em;
  text-align: center; 
  transition: background-color .33s ease-in-out;
}
code { font-size: 1.25em; }
fieldset {
  --i: 0;
  --j: 1;
  border: 0;
  display: grid;
  gap: 2px;
  grid-template-columns: repeat(4, 1fr);
  padding: 1px;
  position: absolute;
  transform: rotate3d(var(--i), var(--j), 0, var(--a)) translateZ(2em);
  backface-visibility: hidden;
  background: #FFF;
  height: 4em;
  margin: -2em;
  width: 4em;
}
fieldset:nth-child(n + 5) {
  --i: 1;
  --j: 0;
}
fieldset:nth-child(1) {
  --a: 0deg;
  --ga: 352deg;
  --h: 0deg;
}
fieldset:nth-child(2) {
  --a: 90deg;
  --ga: 12deg;
  --h: 60deg;
}
fieldset:nth-child(3) {
  --a: 180deg;
  --ga: 48deg;
  --h: 120deg;
}
fieldset:nth-child(4) {
  --a: 270deg;
  --ga: 192deg;
  --h: 180deg;
}
fieldset:nth-child(5) {
  --a: 90deg;
  --ga: 317deg;
  --h: 240deg;
}
fieldset:nth-child(6) {
  --a: -90deg;
  --ga: 128deg;
  --h: 300deg;
}.........完整代码请登录后点击上方下载按钮下载查看