三维n95口罩展示及参数修改效果代码-html代码-BFW代码库

三维n95口罩展示及参数修改效果代码

代码语言：html

所属分类：三维

代码描述：三维n95口罩展示及参数修改效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
/* 
 Best viewed in Full mode (Tested on Chrome and FireFox)
 CSS Only 3D KN95-Face Mask with 3D Camera Simulation.
 This 3D object created and processed using CSS and
 powered by a few lines of JavaScript.
 */

html, body{
padding:0;
margin:0;
background-color:white;
font-family:"Arial", sans-serif;
font-size:10px;
width:100vw;
height:100vh;
display:block;
scrollbar-color:rgb(0,100,200) rgb(20,25,30);
scrollbar-width:thin;
}

body::before{
content:"";
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-image:radial-gradient(#FFF, #000);
background-size:100vw 100vh;
display:block;
opacity:0.4;
}

/* enhancements */
.noscroll{
overflow:hidden;
}

.noanimations .uniform,
.noanimations .object3d,
.noanimations .extension,
.noanimations #controls{
transition:none;
transition-property:none;
transition-duration:0s;
transition-timing-function:linear;
}

.noantialiasing [t3d],
.noantialiasing [pr-ant] div{
box-shadow:none;
}

.controls-hidden .uniform{
left:calc(var(--ptx, 156px) - 156px);
}

/* maximum space to scale the scene uniformly */
.uniform{
position:absolute;
left:var(--ptx, 156px); /* sidebar width */
top:var(--pty, 0px); /*45,10*/
width:100vw;height:100vh;
transform:scale(var(--s,1));
display:flex;
align-items:center;
overflow:visible;
transition:transform ease 1s;
transition-property:transform, left, top; /* bad idea! */
will-change:transform, left, top; /* render optimization */
}

/* represent the object in 3D space */
.object3d{
top:0px;
position:relative;
transform:perspective(var(--p, 1000px)) rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg)) rotateZ(var(--z, 0deg)) translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, -12px));
--path-max-rotate:calc(360deg + var(--z, 0deg));
transform-style:preserve-3d;
margin:auto;
transition:transform ease 1s; /* don't animate top, done! */
will-change:transform; /* render optimization */
}

.object3d.rotate{
animation:autorotate linear var(--rs, 2s) forwards infinite;
}

@keyframes autorotate{
100%{
transform:perspective(var(--p, 1000px)) rotateX(var(--x, 0deg)) rotateY(var(--y, 0deg)) rotateZ(var(--path-max-rotate)) translate3d(var(--tx, 0px), var(--ty, 0px), var(--tz, -12px));
}
}

/* anti-aliasing */
[ant]{
box-shadow:0 0 0 1px rgba(0,0,0,0);
}

[pr-ant] div{
box-shadow:0 0 0 1px rgba(0,0,0,0);
}

/* parent 3D */
[t3d]{
transform-style:preserve-3d;
}

[t3dc], [t3dc] div{
transform-style:preserve-3d;
}

/* children 3D */
[t3dp]::before, [t3dp]::after{
transform-style:preserve-3d;
}

/* child 3D */
[t3db]::before{transform-style:preserve-3d;}
[t3da]::after{transform-style:preserve-3d;}

/* Default Variables for easy access */
.default-variables{
--grinding-ratio: 35%;
--angle-of-base: 41deg;
--angle-of-cone: 49.4deg; /*60.4deg*/
--angle-of-cone-b: 49.4deg;
--angle-of-strip:2deg;
--angle-of-low:35deg;

/* position, size */
--strip-x:8px;
--str.........完整代码请登录后点击上方下载按钮下载查看