camera.js实现一个css绘制的三维物体360选择缩放效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：camera.js实现一个css绘制的三维物体360选择缩放效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
  
<style>
:root {
  --unit: 1vmin;
  --zoom: 100;
  --available-screen-min: 665;
  --px: calc(var(--zoom) * (var(--unit) / var(--available-screen-min)));
  --auto-rotate-duration: 10s;
  --auto-rotate-timing-func: ease;
  --auto-rotate-direction: forwards;
  --fallback-fonts: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica,
  	Arial, Ubuntu, sans-serif, "Apple Color Emoji", "Twemoji Mozilla",
  	"Segoe UI Emoji", "Segoe UI Symbol";
}

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
       text-size-adjust: none;
}

*::before,
*::after {
  display: block;
}

body {
  touch-action: none;
}

html {
  cursor: -webkit-grab;
  cursor: grab;
}

html:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

html,
body {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  scrollbar-width: thin;
  font-size: 0;
  overflow: hidden;
  /* to make touch gestures work correctly */
}

html::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-image: radial-gradient(circle at 50% 50%, #fff, #f8f8f8);
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
}

[data-camera] {
  --scene-size: 500;
  --scale: 100;
  --perspective: 1200;
  --cameraZ: 0;
  --cameraY: 0;
  --translateX: 0;
  --translateY: 0;
  --translateZ: 0;
}

[data-camera] {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  --fmt-s: calc(var(--scale, 100) / 100);
  transform: scale(var(--fmt-s));
  display: grid;
  place-items: center;
  overflow: visible;
  transition: transform ease 500ms;
  will-change: transform;
}

[data-scene] {
  position: relative;
  left: 0;
  top: 0;
  width: calc(var(--scene-size) * var(--px));
  height: calc(var(--scene-size) * var(--px));
  background-color: rgba(0, 0, 0, 0.1);
  transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg)) rotateZ(calc(var(--cameraZ, 0) * 1deg)) translate3d(calc(var(--translateX, 0) * var(--px)), calc(var(--translateY, 0) * var(--px) * -1), calc(var(--translateZ, 0) * var(--px) * -1));
  --max-rotation: calc((360 + var(--cameraZ)) * 1deg);
  transform-origin: 50% 50%;
}

[data-camera][data-dragging] {
  transition: none;
}

@-webkit-keyframes rotateCamera {
  to {
    transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg)) rotateZ(var(--max-rotation)) translate3d(calc(var(--translateX, 0) * var(--px)), calc(var(--translateY, 0) * var(--px) * -1), calc(var(--translateZ, 0) * var(--px) * -1));
  }
}

@keyframes rotateCamera {
  to {
    transform: perspective(calc(var(--perspective, 1000) * 1px)) rotateX(calc(var(--cameraY, 0) * 1deg)) rotateZ(var(--max-rotation)) translate3d(calc(var(--translateX, 0) * var(--px)), calc(var(--translateY, 0) * var(--px) * -1), calc(var(--translateZ, 0) * var(--px) * -1));
  }
}
[data-scene],
[data-camera],
[data-3d] {
  transform-style: preserve-3d;
}

[data-hidden],
.class-hidden {
  display: none;
}

:root {
  --broadness: 400;
  --thickness: 100;
  --corner-radius: 0.26;
  --inner-circle-radius: 0.2;
  --inner-circle-width-props: 0.98;
  --inner-circle-height-props: 0.98;
  --corner-circle-width-props: 1.15;
  --color-background: hsl(219.5, 100%, 57.8%);
  --color-shade: rgba(0, 0, 0, 0.07);
  --shade-step: 0.02;
  --shade-x-left: 0.1;
  --shade-x-right: 0;
  --shade-y-left: 0.29;
  --shade-y-right: 0;
  --inner-shade-opacity: 0.5;
  --inner-shade-start: 0.2;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --corner-circle-diameter: calc(var(--broadness) * var(--corner-radius) * 2);
  --inner-circle-diameter: calc(
  	var(--inner-circle-radius) * var(--broadness) * var(--px) *
  		var(--inner-circle-width-props)
  );
  --calc-broadness: calc(var(--broadness) * var(--px));
  --calc-corner-radius: calc(var(--corner-radius) * 100%);
}

.hn-3d {
  position: absolute;
  width: var(--calc-broadness);
  height: var(--calc-broadness);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}
.hn-3d .custom-cylinder, .hn-3d .custom-cube {
  position: absolute;
}

[data-camera] {
  --cameraY: 31;
  --cameraZ: 233;
}

body {
  filter: drop-shadow(0 calc(55 * var(--px)) calc(16 * var(--px)) var(--shadow-color));
}

[data-scene] {
  background-color: #fff0;
}

[data-3d], [data-3d]::before, [data-3d]::after, [data-3d] div, [data-3d] div::before, [data-3d] div::after {
  transform-style: preserve-3d;
  box-shadow: var(--need-edge-fix, 0 0 0 1px rgba(0, 0, 0, 0.01));
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #fff;
  }

  html::before {
    background-image: radial-gradient(circle at center, #000, #111);
  }

  body {
    --shadow-color: rgba(255, 255, 255, 0.1);
  }
}
@supports not (-moz-appearance: none) {
  :root {
    --need-edge-fix: none;
    --inner-circle-height-props: 1;
  }
}
.custom-cylinder {
  --diameter: var(--corner-circle-diameter);
  --color-side: var(--color-background);
  --calc-theta: calc(360 / var(--n));
  --calc-diameter: calc(var(--diameter) * var(--px));
  --calc-radius: calc(var(--calc-diameter) * 0.5);
  --calc-depth: calc(var(--thickness) * var(--px) * var(--fix-height-props, 1));
  width: var(--calc-diameter);
  height: var(--calc-diameter);
}
.custom-cylinder:nth-child(1) {
  left: 0;
  bottom: 0;
  --shade-start: -0.08;
}
.custom-cylinder:nth-child(2) {
  left: 0;
  top: 0;
  --start: 1;
  --shade-start: 0.1;
}
.custom-cylinder:nth-child(3) {
  right: 0;
  top: 0;
  --start: 2;
  --shade-start: 0.3;
}
.custom-cylinder:nth-child(4) {
  right: 0;
  bottom: 0;
  --start: 3;
  --shade-start: 0.1;
}
.custom-cylinder:nth-child(5) {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%) rotate(-145deg);
  --fix-height-props: var(--inner-circle-height-props);
  --diameter: calc(var(--broadness) * var(--inner-circle-radius) * 2);
}
.custom-cylinder:nth-child(5) div {
  --shade-binary: calc(var(--j) - (var(--binary) * (2 * var(--k))));
  --shades: clamp(
  	0,
  	(var(--shade-binary) / var(--n)) * var(--inner-shade-opacity),
  	1
  );
  --shade: rgba(0, 0, 0, calc(var(--shades) + var(--inner-shade-start)));
}
.custom-cylinder div {
  --beta: calc(var(--shift) * 1deg);
  --angle: calc(var(--calc-theta) * var(--i) * 1deg);
  --perpendicular: calc(var(--calc-radius) * var(--perpend));
  --calc-edge: calc(
  	var(--calc-diameter) * var(--edge) * var(--corner-circle-width-props, 1)
  );
  --start-from: calc(var(--start, 0) * 90deg);
  --shade-algo: calc(var(--shade-start) + (var(--shade-step) * var(--i)));
  --color-shade: rgba(0, 0, 0, var(--shade-algo));
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--calc-edge);
  height: var(--calc-depth);
  transform: translate(-50%, -50%) rotateZ(var(--start-from)) rotateZ(var(--beta)) rotateZ(var(--angle)) translateX(var(--perpendicular)) rotateX(90deg) rotateY(90deg);
  transform-origin: center;
  background-color: var(--color-side);
  background-image: linear-gradient(var(--shade, var(--color-shade)) 0 0);
}

.custom-cube {
  --base-width: var(--broadness);
  --side-width: var(--broadness);
  --crop-size: calc(var(--calc-corner-radius) * 2);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  --calc-base-width: calc(var(--base-width) * var(--px));
  --calc-side-width: calc(var(--side-width) * var(--px));
  --calc-height: calc(var(--thickness) * var(--px));
  --circle-mask: radial-gradient(
  	#fff0 var(--inner-circle-diameter),
  	#fff calc(var(--inner-circle-diameter) + 1px)
  );
  --half-variable: var(--calc-height);
  width: var(--calc-base-width);
  height: var(--calc-side-width);
}
.custom-cube::before, .custom-cube::after {
  background-color: var(--color-background);
  background-image: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.2));
  mask-image: var(--circle-mask);
  -webkit-mask-image: var(--circle-mask);
}
.custom-cube::before, .custom-cube::after, .custom-cube div::before, .custom-cube div::after {
  --calc-sgn-half: calc(var(--half-variable) * 0.5 * var(--sgn));
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateZ(var(--calc-sgn-half));
}
.custom.........完整代码请登录后点击上方下载按钮下载查看