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

代码语言：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;
}
form {
  font-size: 12vmin;
  left: 50%;
  position: absolute;
  top: 50%;
  transform-style: preserve-3d;
  transform: rotate3d(var(--i, -7), var(--j, 8), 0, var(--a, 47deg)) var(--p,  );
}
input {
  all: unset;
  background-color: var(--bg);
  display: block;
  position: relative;
}
input:checked::after {
  background-color: color-contrast(var(--bg, #B71C1C) vs black, white);
  content: '';
  display: block;
  inset: 0;
  mask: var(--check) no-repeat 50% 50%;
  position: absolute;
  -webkit-mask: var(--check) no-repeat 50% 50%;
}
label { display: contents; }
p, small {

  display: block;
  position: fixed;
  
}
p {
  margin: 0;
  top: 1ch;
  left: 1ch;
  white-space: nowrap;
}
small {
  bottom: 1ch;
  right: 1ch;
}
</style>

  
  
</head>

<body >
  <p><strong>Selected color:</strong> <code>rgb(183, 28, 28)</code></p>
<form>
  <fieldset>
    <label><input type="radio" name="color" style="--bg: #B71C1C" checked /></label>
    <label><input type="radio" name="color" style="--bg: #C62828" /></label>
    <label><input type="radio" name="color" style="--bg: #D32F2F" /></label>
    <label><input type="radio" name="color" style="--bg: #E53935" /></label>
    <label><input type="radio" name="color" style="--bg: #F44336" /></label>
    <label><input type="radio" name="color" style="--bg: #EF5350" /></label>
    <label><input type="radio" name="color" style="--bg: #E57373" /></label>
    <label><input type="radio" name="color" style="--bg: #EF9A9A" /></label>
    <label><input type="radio" name="color" style="--bg: #880E4F" /></label>
    <label><input type="radio" name="color" style="--bg: #AD1457" /></label>
    <label><input type="radio" name="color" style="--bg: #C2185B" /></label>
    <label><input type="radio" name="color" style="--bg: #D81B60" /></label>
    <label><input type="radio" name="color" style="--bg: #E91E63" /></label>
    <label><input type="radio" name="color" style="--bg: #EC407A" /></label>
    <label><input type="radio" name="color" style="--bg: #F06292" /></label>
    <label><input type="radio" name="color" style="--bg: #F48FB1" /></label>
  </fieldset>
  <fieldset>
    <label><input type="radio" name="color" style="--bg: #4A148C" /></label>
    <label><input type="radio" name="color" style="--bg: #6A1B9A" /></label>
    <label><input type="radio" name="color" style="--bg: #7B1FA2" /></label>
    <label><input type="radio" name="color" style="--bg: #8E24AA" /></label>
    <label><input type="radio" name="color" style="--bg: #9C27B0" /></label>
    <label><input type="radio" name="color" style="--bg: #AB47BC" /></label>
    <label><input type="radio" name="color" style="--bg: #BA68C8" /></label>
    <label><input type="radio" name="color" style="--bg: #CE93D8" /></label>
    <label><input type="radio" name="color" style="--bg: #311B92" /></label>
    <label><input type="radio" name="color" style="--bg: #4527A0" /></label>
    <label><input type="radio" name="color" style="--bg: #512DA8" /></label>
    <label><input type="radio" name="color" style="--bg: #5E35B1" /></label>
    <label><input type="radio" name="color" style="--bg: #673AB7" /></label>
    <label><input type="radio" name="color" style="--bg: #7E57C2" /></label>
    <label><input type="radio" name="color" style="--bg: #9575CD" /></label>
    <label><input type="radio" name="color" style="--bg: #B39DDB" /></label>
  </fieldset>
  <fieldset>
    <label><input type="radio" name="color" style="--bg: #0D47A1" /></label>
    <label><input type="radio" name="color" style="--bg: #1565C0" /></label>
    <label><input type="radio" name="color" style="--bg: #1976D2" /></label>
    <label><input type="radio" name="color" style="--bg: #1E88E5" /></label>
    <label><input type="radio" name="color" style="--bg: #2196F3" /></label>
    <label><input type="radio" name="color" style="--bg: #42A5F5" /></label>
    <label><input type="radio" name="color" style="--bg: #64B5F6" /></label>
    <label><input type="radio" name="color" style="--bg: #90CAF9" /></label>
    <label><input type="radio" name="color" style="--bg: #01579B" /></label>
    <label><input type="radio" name="color" style="--bg: #0277BD" /></label>
    <label><input type="radio" name="color" style="--bg: #0288D1" /></label>
    <label><input type="radio" name="color" style="--bg: #039BE5" /></label>
    <label><input type="radio" name="color" sty.........完整代码请登录后点击上方下载按钮下载查看