html5 2020视觉效果,HTML5 改变观察视角的效果预览

CSS

语言：

CSSSCSS

确定

body {

overflow: hidden;

margin: 0;

height: 100vh;

perspective: 16em;

}

.cube,

.cube *,

.cube:before {

position: absolute;

top: 50%;

left: 50%;

transform-style: preserve-3d;

}

.cube:nth-child(1) {

transform: translate(-20vw, 5vh);

}

.cube:nth-child(2) {

transform: translate(15vw, -10vh);

}

.cube__face {

margin: -4em;

width: 8em;

height: 8em;

box-shadow: inset 0 0 0 2px #be4c39;

background: rgba(212, 155, 0, 0.2);

}

.cube__face:nth-child(1) {

transform: rotateY(0deg) translateZ(4em);

}

.cube__face:nth-child(2) {

transform: rotateY(90deg) translateZ(4em);

}

.cube__face:nth-child(3) {

transform: rotateY(180deg) translateZ(4em);

}

.cube__face:nth-child(4) {

transform: rotateY(270deg) translateZ(4em);

}

.cube__face:nth-child(5) {

transform: rotateX(90deg) translateZ(4em);

}

.cube__face:nth-child(6) {

transform: rotateX(-90deg) translateZ(4em);

}

.plane {

margin: -8em;

width: 16em;

height: 16em;

background: linear-gradient(#000 2px, transparent 2px) 0 calc(8em - 1px), linear-gradient(90deg, #000 2px, transparent 2px) calc(8em - 1px) 0 rgba(68, 114, 185, 0.16);

}

.plane:before {

margin: -4em;

width: 8em;

height: 8em;

box-shadow: inset 0 0 0 2px #e18728;

/* controls */

content: '';

}

form {

position: absolute;

bottom: 0.25em;

right: 0.25em;

margin: 0.25em;

padding: 0.5em;

background: #262626;

color: #aaa;

font: 1em/1.375em trebuchet ms, sans serif;

text-align: center;

}

input[type='range'] {

display: block;

margin: 1em auto 0;

padding: 0;

width: 13em;

height: 2em;

background: none;

font-size: 1em;

cursor: pointer;

}

input[type='range'],

input[type='range']::-webkit-slider-runnable-track,

input[type='range']::-webkit-slider-thumb {

-webkit-appearance: none;

}

input[type='range']::-webkit-slider-runnable-track {

width: 13em;

height: 0.25em;

background: #aaa;

}

input[type='range']::-moz-range-track {

width: 13em;

height: 0.25em;

background: #aaa;

}

input[type='range']::-ms-track {

border: none;

width: 13em;

height: 0.25em;

background: #aaa;

color: transparent;

}

input[type='range']::-moz-range-progress {

height: 0.25em;

background: #e18728;

}

input[type='range']::-ms-fill-lower {

background: #e18728;

}

input[type='range']::-webkit-slider-thumb {

margin-top: -0.5em;

border: none;

width: 1.25em;

height: 1.25em;

border-radius: 50%;

background: #e18728;

}

input[type='range']::-moz-range-thumb {

border: none;

width: 1.25em;

height: 1.25em;

border-radius: 50%;

background: #e18728;

}

input[type='range']::-ms-thumb {

border: none;

width: 1.25em;

height: 1.25em;

border-radius: 50%;

background: #e18728;

}

input[type='range']::-ms-tooltip {

display: none;

}

input[type='range'] + label {

display: block;

}

input[type='range']:focus {

outline: none;

}

.token--value {

color: #d58173;

}