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

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

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