CSS 3D K-N95口罩

下载代码

html

css

分享到微信朋友圈

html

<DIV class="uniform">

<DIV class="object3d default-variables">
<div class="main-stage" t3d>
	<div class="main-rect" t3d ant pr-ant>
		<DIV class="side side-left" t3d>
				<div class="rig"></div>
				<div class="rig-s"></div>
			<div class="mass" t3d>
				<div class="strip strip1"></div>
				<div class="strip strip2"></div>
			</div>
			<div class="cc mass" t3d>
				<div class="strip strip1"></div>
				<div class="strip strip2"></div>
			</div>
			<div class="oval-gen">
				<div class="oval"></div>
			</div>
			<div class="cc oval-gen">
				<div class="oval"></div>
			</div>
			<DIV class="over-top" t3d>
				<div class="low-cone"></div>

<span class="extension">
<button class="ehide" title="Show Controls" onclick="controls.classList.toggle('hide');document.documentElement.classList.toggle('controls-hidden')">?</button><br>
<button class="spin360" title="Spin" onclick="document.documentElement.classList.toggle('rotating');document.querySelector('.object3d').classList.toggle('rotate')">●</button>
</span>

<SPAN id="controls">
<span class="title">Rotation</span>
<label>
<span title="Horizontal Rotation ?">X</span>
<input type="range" id="y_axis" min="-180" max="180" value="0" onchange="apply(this, '--y', 'deg')" oninput="apply(this, '--y', 'deg')" step="0.1"/>
<span></span>
</label>

<span class="title">Position 2D</span>
<label>
<span title="X axis">X</span>
<input type="range" id="pos_x" min="-364" max="364" value="170" onchange="apply(this, '--ptx', 'px')" oninput="apply(this, '--ptx', 'px')" step="1"/>
<span></span>
</label>

<span class="title">Transform</span>
<label>
<span title="Translate X">X</span>
<input type="range" id="ty_axis" min="-2000" max="2000" value="0" onchange="apply(this, '--ty', 'px')" oninput="apply(this, '--ty', 'px')" step="1"/>
<span></span>
</label>

<span class="title">Default Features</span>

<center>
<button class="anim-boost" onclick="document.documentElement.classList.toggle('noanimations')">Animations</button>
<button class="body-scroll" onclick="document.documentElement.classList.toggle('noscroll')">Scroll</button>
<br>
<button class="spin360" onclick="document.documentElement.classList.toggle('rotating');document.querySelector('.object3d').classList.toggle('rotate')">Spin 360°</button>



<button class="ehide" onclick="controls.classList.toggle('hide');document.documentElement.classList.toggle('controls-hidden')">Controls</button>
</center>

css

/* 
 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%;
height:6px;
transform:rotate(var(--angle-of-strip));
}

.strip2{
position:absolute;
left:var(--strip-x);
bottom:var(--strip-y);
width:79%;
height:6px;
transform:rotate(calc(var(--angle-of-strip) * -1));
}

/*
.oval::before{
content: "";
position: absolute;
left: -122px;
top: 1px;
width: 194%;
height: 100%;
border-radius: 50%;
border: 2.5px dashed rgba(0,0,0,0.2);
transform: rotate(17deg);
}
*/

/* This might be the best hack for curved borders :D */
.oval::before{
content: "";
position: absolute;
left: -122px;
top: 3px;
width: 194%;
height: 98%;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='80%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='200' ry='100' stroke='rgba(0,0,0,0.2)' style='box-sizing:border-box' stroke-width='4.6' stroke-dasharray='2.1 12' stroke-dashoffset='5px' stroke-linecap='square'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 50%;
}

.side-right .cc .oval::before{
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='80%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='200' ry='100' stroke='rgba(255,255,255,0.4)' style='box-sizing:border-box' stroke-width='4.6' stroke-dasharray='2.1 12' stroke-dashoffset='5px' stroke-linecap='square'/%3e%3c/svg%3e");
}

.over-top .cone1-finish::before,
.over-bottom .cone2-finish::before{
content: "";
position: absolute;
background-image: linear-gradient(90deg, rgba(0,0,0,0.17) 8px, transparent 6px);
background-repeat: repeat-x;
background-size: 16px 5px;
background-position: 0px 0;
right: 10px;
top: 50%;
width: 100%;
height: 4px;
}

.over-top .cone1-finish::before{
transform: translateY(3px) rotate(31deg);
}

.over-bottom .cone2-finish::before{
transform: translateY(-6px) rotate(-31deg);
}

.side-right .over-top .cc.cone1-finish::before,
.side-right .over-bottom .cc.cone2-finish::before{
background-image: linear-gradient(90deg, rgba(255,255,255,0.4) 8px, transparent 6px);
}

/* conic outlines */

.over-top .cone1::before{
content: "";
position: absolute;
left: -3px;
top: -2px;
width: 100%;
height: 100%;
background-image: linear-gradient(132deg, #aaa 68px, transparent 56px);
}

.over-bottom .cone2::before{
content: "";
position: absolute;
left: 75px;
bottom: -38px;
width: 2px;
height: 101%;
background: rgba(0,0,0,0.22);
transform: rotate(-42deg) translateY(-62px);
}

/* handles */
.low-cone{
position: absolute;
left: 50px;
bottom: 38px;
width: 37%;
height: 10px;
background: #585050;
border-radius: 0px 10px 10px 0px;
opacity:0.6;
}

.low-cone::before{
content: "";
position: absolute;
left: 54%;
top: 50%;
width: calc(100% + 1px);
height: calc(100% + 14px);
border: 2px dotted #aaa;
transform: translate(-50%,-50%);
box-sizing: border-box;
border-left: 0;
display: block;
}

.side-left .low-cone{transform:translateZ(-1px) rotate(var(--angle-of-low));background:#666565}
.side-right .low-cone{transform:translateZ(1px) rotate(var(--angle-of-low))}

/* hands */
.rig, .rig-s{
position: absolute;
right: 43px;
top: 50%;
width: 145px;
height: 153px;
border: 7px solid #5767C7;
border-left-color: transparent;
border-radius: 30% 70% 77% 23% / 45% 47% 53% 55%;
transform: translate(100%, -50%);
z-index: 0;
}

.side-left .rig{transform: translate3d(100%, -50%, 1px)}
.side-right .rig{transform: translate3d(100%, -50%, 0px)}

.rig-s{
border:0;
border-radius:0;
z-index:2;
right:32px;
}

.rig-s::before, .rig-s::after{
content:"";
position:absolute;
left:0;
width:14px;
height:14px;
background-color:#5767C7;
background-image:linear-gradient(-25deg, rgba(255,255,255,0.1) 25%, transparent 75%), linear-gradient(0deg, rgba(255,255,255,0.1) 75%, transparent 25%);
background-size:2px 6px, 2px 6px;
border-radius: 30% 70% 77% 23% / 45% 47% 53% 55%;
box-shadow:0 0 0 2px rgba(0,0,0,0);
display:block;
opacity:0.5;
}

.rig-s::before{top:-4px}
.rig-s::after{
bottom:-4px;
border-radius:30% 70% 77% 23% / 77% 47% 53% 23%;
}

:root{
--controls-active:linear-gradient(0deg, rgba(0,100,200,0.4), rgba(0,100,200,0.4));
--controls-active-warn:linear-gradient(0deg, rgba(217,54,0,0.4), rgba(217,54,0,0.4));
}

/* controls */
#controls
{
position:fixed;
left:0px;
top:0px;
background-color:black;
display:block;
padding:4px 0;
color:white;
height:100%;
transition-property:transform;
transition-duration:0.64s;
transition-timing-function:cubic-bezier(.17,.84,.44,1);
box-shadow:4px 0 10px 0px rgba(0,0,0,0.2);
}

/* additional controls */
button.disabled{
opacity:0.4;
pointer-events:none;
}

button.board-borders::before{
content:"Hide ";
}
.noborders button.board-borders::before{
content:"Show ";
}

button.anim-boost::before{
content:"Reduce ";
}
.noanimations button.anim-boost::before{
content:"Enable ";
}

.noborders #controls button.board-borders{
background-image:var(--controls-active);
}

.highlighted #controls button.support-lines{
background-image:var(--controls-active);
}

.noanimations #controls button.anim-boost{
background-image:var(--controls-active-warn);
}

.noscroll #controls button.body-scroll{
background-image:var(--controls-active-warn);
}

.noantialiasing #controls button.no-anti-aliasing{
background-image:var(--controls-active-warn);
}

.rotating #controls button.spin360,
.rotating .extension button.spin360{
background-image:var(--controls-active);
}

/* check for board type */
button.body-scroll::before{
content:"Disable ";
}
.noscroll button.body-scroll::before{
content:"Enable ";
}

/* controls makeup */
#controls .title{
position:relative;
padding:6px 8px;
display:block;
margin:2px 0;
}

#controls button, .extension button{
display:inline-block;
background:rgba(255,255,255,0.1);
color:white;
border:0;
position:relative;
font-size:10px;
padding:6px 14px;
margin:2px auto;
width:48%;
/*outline:none;*/
outline-offset:-4px;
}

#controls button.ehide::before{
content:"Hide ";
}

#controls button:hover, .extension button:hover{
background:rgba(255,255,255,0.2);
}
#controls button:active, .extension button:active{
background:rgba(255,255,255,0.15);
}

#controls.hide{
transform:translateX(-100%);
}

#controls.hide button.ehide{
background-image:var(--controls-active);
}

#controls.hide button.ehide::before{
content:"Show ";
}

label{
display:block;
padding:4px 8px;
}

label > span{
display:inline-block;
color:white;
width:20px;
height:12px;
line-height:12px;
position:relative;
left:0px;
top:-2px;
opacity:0.7;
}

label:hover > span{
opacity:1;
}

label > span:last-child{
width:50px;
text-align:right;
}

input[type="range"]{
-webkit-appearance:none;
appearance:none;
padding:0;
margin:0;
overflow:hidden;
width:200px;
height:12px;
background:rgb(20,20,20);
}

/* range makeup for Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0)
{
input[type='range']::-webkit-slider-thumb
{
-webkit-appearance:none;
width:15px;
height:12px;
cursor:ew-resize;
background:#434343;
}

input[type='range']:hover::-webkit-slider-thumb
{
background:rgb(0,110,210);
}

input[type='range']:active::-webkit-slider-thumb
{
background:rgb(0,160,255);
}

input[type='range']:hover, input[type='range']:active
{
background:rgb(30,30,30);
}
}

/* range makeup for FireFox */
input[type="range"]::-moz-range-thumb
{
appearance:none;
width:15px;
height:12px;
background:rgb(0,100,200);
border:0;
border-radius:0;
cursor:ew-resize;
}

input[type="range"]:hover::-moz-range-thumb
{
background:rgb(0,110,210);
}

input[type="range"]::-moz-range-thumb:hover, input[type="range"]::-moz-range-thumb:active
{
background:rgb(0,160,255);
}

input[type="range"]::-moz-range-progress
{
height:12px;
background:rgb(0,40,80);
}

input[type="range"]:hover::-moz-range-progress
{
background:rgb(0,50,100);
}

/* extensions */
.extension{
position:fixed;
left:292px;
top:0px;
width:36px;
background:black;
box-shadow:4px 0 10px 0px rgba(0,0,0,0.2);
font-size:0;
transition-property:left, transform;
transition-duration:0.64s;
transition-timing-function:cubic-bezier(.17,.84,.44,1);
transform:translateX(-100%);
padding:0;
display:block;
}

.extension button{
width:100%;
height:32px;
padding:0;
margin:0;
}

.controls-hidden .extension{
left:0px;
transform:translateX(0%);
}

/* footer */
@media (min-height: 500px){
.footer{
display:none;
}
}

.footer{
position:absolute;
left:50%;
bottom:0;
height:60px;
display:block;
white-space:nowrap;
transform:translateX(-50%);
background:black;
}

.footer a{
padding:0 14px;
display:inline-block;
text-decoration:none;
font-size:0;
opacity:0.6;
position:relative;
}

.footer .twitter{
top:2px;
}

.footer a:hover{
opacity:1;
}

.footer .twitter svg{
width:28px; /* 2% margin extended */
height:28px;
fill:white;
}

.footer .dribbble svg{
width:24.5px;
height:24.5px;
overflow:visible;
}

.footer .dribbble svg path{
fill:white!important;
}

JavaScript

/*
   No javascript were harmed to make this CSS
   3D object. It's included to change and update
   camera movements such as transform, rotate, scale.
 */
function apply(i,o,u)
{
var output;
if(u){output = i.value + (u + '')}
else{output = Number(i.value)}
document.documentElement.style.setProperty(o, output);
i.nextElementSibling.innerHTML = output;
}

/*
   Load the default configurations on startup.
*/
window.addEventListener('load', function(){
apply(x_axis, '--x', 'deg');
apply(y_axis, '--y', 'deg');
apply(z_axis, '--z', 'deg');
apply(tx_axis, '--tx', 'px');
apply(ty_axis, '--ty', 'px');
apply(tz_axis, '--tz', 'px');
apply(perspective, '--p', 'px');
apply(scale, '--s');
apply(r_duration, '--rs', 's');
apply(pos_x, '--ptx', 'px');
apply(pos_y, '--pty', 'px');

// make the object scalable
setTimeout(function(){
document.documentElement.classList.add("scalable");
}, 1000);

// print the number of elements used
var n_div = document.querySelectorAll("div").length;
var n_span = document.querySelectorAll("span").length;
console.info(`${n_div} DIVs and ${n_span} SPANs used so far. :)`);
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg