camera实现三维立体多彩圆锥体效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：camera实现三维立体多彩圆锥体效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
.-pen-placeholder {
  background: #181921;
  height: 100vh;
}

:root {
  --chrome-factor: 0;
  --firefox-factor: 1;
}

@supports not (-moz-appearance: none) {
  :root {
    --chrome-factor: 1;
    --firefox-factor: 0;
  }
}
: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;
}

/* hint: drag to rotate the shape */
/*
 * 25 March, 2022 (rev. 2)
 * CSS 3D Lowpoly Pyramid (simplified)
 * originally created on 10 December, 2021
 *
 * This pen demonstrates a simple approach of creating a low-poly pyramid shape for use in CSS 3D projects
 *
 */
[data-camera] {
  --cameraY: 0;
  --cameraZ: 360;
  --translateZ: 100;
  filter: drop-shadow(0 0 calc(60 * var(--px)) #4d4d4d);
}

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

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

[data-pyramid] {
  --points: 20;
  --theta: 18;
  --alpha: 9;
  --beta: 81;
  --slant-s.........完整代码请登录后点击上方下载按钮下载查看