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

代码语言：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;
--strip-y:16px;
--mz: 254px;
--oval-shift: -17px;
--oval-radius:350px;
--angle-height-1: 160px; /*14px*/
--angle-height-2: 160px;
--base-width: 240px;
--base-height: 190px;

/* L.H.S */
--color-triangle-top-1: #fff;
--color-triangle-bottom-1: #f6f6f6;
--color-base-left-1: #fff;
--shade-cones-top: rgba(0,0,0,0.15);

/* R.H.S */
--color-triangle-top-2: #e0e0e0;
--color-triangle-bottom-2: #d3d3d3;
--color-base-right-1: #dbdbdb;
--shade-cones-bottom: rgba(0,0,0,0);

/* BOTH */
--shade-cage: rgba(0,0,0,0.1);
}

/* Main */
.main-stage{
position:relative;
top:0;
left:0;
width:246px; /* it's kinda shadow size ;) */
height:305px;
}

.main-stage::before{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.16);
filter:blur(40px);
border-radius:40%;
backface-visibility:hidden;
}

.main-rect{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%) translateZ(var(--mz)) rotateX(-90deg);
width:var(--base-width);
height:var(--base-height);
}

.main-rect::before, .main-rect::after{
content:"";
position:absolute;
left:2px;
top:0;
width:11px;
height:100%;
background-color:#bbb;
background-image:linear-gradient(0deg, rgba(255,255,255,0.7) 2px, transparent 1px), linear-gradient(0deg, rgba(0,0,0,0.13) 2px, transparent 1px);
background-size:2px 2px, 1px 4px;
background-position:6px 0, 0 0;
background-repeat:repeat-y, repeat;
transform:translateX(-100%);
/*clip-path: polygon(5% 5%, 100% 0, 100% 100%, 5% 95%);*/
border-radius:20px 0px 0px 20px;
backface-visibility:hidden;
border:1.5px solid rgba(0,0,0,0.1);
box-sizing:border-box;
box-shadow:0 0 0 2px rgba(0,0,0,0);
}

.main-rect::after{
background-color:#d5d5d5;
background-image:linear-gradient(0deg, rgba(255,255,255,0.7) 2px, transparent 1px), linear-gradient(0deg, rgba(255,255,255,0.4) 2px, transparent 1px);
transform:translateX(-100%) rotateX(-180deg);
}

.main-rect .mass{
position:absolute;
left:0;
top:0;
width:76%;
height:100%;
}

.main-rect .oval-gen{
position: absolute;
left:75%;.........完整代码请登录后点击上方下载按钮下载查看