三维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%;
top: 0;
width:49%;
height:100%;
overflow:hidden;
}

.main-rect .oval{
position: absolute;
left:0;
top: 50%;
width:100%;
height:129%;
border-radius: 0px var(--oval-radius) var(--oval-radius) 0;
transform:translate(var(--oval-shift), -50%);
overflow:hidden;
}

/*
.main-rect .oval-gen {
    position: absolute;
    left: 75%;
    top: 0;
    width: 52%;
    height: 100%;
    overflow: hidden;
    border-radius: 0%;
}
.main-rect .oval {
    position: absolute;
    left: 0;
    top: 49%;
    width: 199%;
    height: 129%;
    border-radius: 39% 61% 68% 32% / 56% 61% 39% 44%;
    transform: translate(-131px, -50%) rotate(-23deg);
    overflow: hidden;
}
*/

.main-rect .side{
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
transform:rotateY(var(--a));
transform-origin:0% 50%;
}

.main-rect .side-left{
--a:var(--angle-of-base);
}

.main-rect .side-right{
--a:calc(var(--angle-of-base) * -1);
}

.side .over-top{
top:0;
height:var(--angle-height-1);
transform:translateY(-100%) rotateX(var(--node));
transform-origin:0% 100%;
}

.side .over-bottom{
bottom:0;
height:var(--angle-height-2);
transform:translateY(100%) rotateX(var(--node));
transform-origin:0% 0%;
}

.side .over-top,
.side .over-bottom{
position:absolute;
left:0;
width:100%;
}

.side-left .over-top{
--node:calc(var(--angle-of-cone) * -1);
}

.side-right .over-top{
--node:var(--angle-of-cone);
}

.side-right .over-bottom{
--node:calc(var(--angle-of-cone-b) * -1);
}

.side-left .over-bottom{
--node:var(--angle-of-cone-b);
}

.cone1, .cone2{
position:absolute;
left:0;
width:var(--grinding-ratio);
height:60%;
background:var(--color-triangle-top-1);
}

.side-left .cone1,
.side-left .cone2{
background:var(--color-triangle-bottom-1);
}

.cone1{
bottom:0;
clip-path:polygon(100% 0, 0 100%, 100% 100%);
}

.cone2{
top:0;
clip-path:polygon(100% 0%, 0% 0%, 100% 100%);
}

.cone1-finish,
.cone2-finish{
position:absolute;
left:var(--grinding-ratio);
width:calc(100% - var(--grinding-ratio));
height:60%;
background:var(--color-triangle-top-1);
}

.side-left .cone1-finish,
.side-left .cone2-finish{
background:var(--color-triangle-bottom-1);
}

.cone1-finish{
bottom:0;
clip-path:polygon(0% 0, 0 100%, 100% 100%);
}

.cone2-finish{
top:0;
clip-path:polygon(100% 0%, 0% 0, 0% 100%);
}

.cones.cc{
display:block;
backface-visibility:hidden;
transform:translateZ(0px);
}

.side-right .cones.cc{
backface-visibility:visible;
transform:translateZ(-1px);
}

.side-right .mass.cc{
backface-visibility:visible;
transform:translateZ(-1px);
}

.oval-gen.cc{
transform:translateZ(1px);
backface-visibility:hidden;
}

.side-right .oval-gen.cc{
backface-visibility:visible;
transform:translateZ(-1px);
}

/* colors */
.side-left .over-top .cones{background-color:var(--color-triangle-top-1)}
.side-right .over-top .cones{background-color:var(--color-triangle-top-2)}

.side-left .over-bottom .cones{background-color:var(--color-triangle-bottom-1)}
.side-right .over-bottom .cones{background-color:var(--color-triangle-bottom-2)}

.main-rect .oval,
.main-rect .mass{
background-color:var(--color-base-left-1);
}
.main-rect .side-right .oval,
.main-rect .side-right .mass{
background-color:var(--color-base-right-1);
}

/* apply thread effect */
.side-left .over-top .cones,
.side-left .over-bottom .cones,
.side-right .over-top .cones,
.side-right .over-bottom .cones,
.main-rect .oval,
.main-rect .mass{
background-image:linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 2px), linear-gradient(0deg, rgba(0,0,0,0.01) 1px, transparent 2px);
background-size:4px 4px, 4px 4px, 4px 4px;
}

/* apply clone shades */
.side-right .over-top .cones.cc,
.side-left .over-top .cones.cc{
background-image:linear-gradient(var(--shade-cones-top), var(--shade-cones-top)), linear-gradient(90deg, rgba(0,0,0,0.02) 2px, transparent 2px), linear-gradient(0deg, rgba(0,0,0,0.01) 2px, transparent 2px);
background-size:4px 4px, 4px 4px, 4px 4px;
}

.side-right .over-bottom .cones.cc,
.side-left .over-bottom .cones.cc{
background-image:linear-gradient(var(--shade-cones-bottom), var(--shade-cones-bottom)), linear-gradient(90deg, rgba(0,0,0,0.02) 2px, transparent 2px), linear-gradient(0deg, rgba(0,0,0,0.01) 2px, transparent 2px);
background-size:4px 4px, 4px 4px, 4px 4px;
}

.oval-gen.cc .oval,
.mass.cc{
background-image:linear-gradient(var(--shade-cage), var(--shade-cage)), linear-gradient(90deg, rgba(0,0,0,0.014) 2px, transparent 2px), linear-gradient(0deg, rgba(0,0,0,0.01) 2px, transparent 2px);
background-size:4px 4px, 4px 4px, 4px 4px;
}

.mass.cc{
backface-visibility:hidden;
}

/* strip */
.strip{
background-image:linear-gradient(90deg, rgba(0,0,0,0.12) 10px, transparent 6px), linear-gradient(90deg, rgba(255,255,255,0.56) 10px, transparent 0%);
background-repeat:repeat-x;
background-size:16px 5px;
background-position:0 0, 0 5px;
}

.cc .strip{
background-image:linear-gradient(90deg, rgba(255,255,255,0.4) 10px, transparent 6px), linear-gradient(90deg, rgba(0,0,0,0.16) 10px, transparent 0%);
}

.strip1{
position:absolute;
left:var(--strip-x);
top:var(--strip-y);
width:94%;
hei.........完整代码请登录后点击上方下载按钮下载查看