HTML5输出字母围成的正方形,通过CSS生成的立体正方形

CSS

语言：

CSSSCSS

确定

html,

body {

width: 100%;

height: 100%;

margin: 0;

}

html {

font-size: 10px;

background: #ddd;

}

* {

box-padding: border-box;

}

.container {

width: 100%;

height: 100%;

}

.bg {

position: absolute;

width: 100%;

height: 100%;

overflow: hidden;

}

.bg:after {

position: absolute;

width: 200%;

height: 75%;

left: -50%;

bottom: 0;

content: '';

background-size: 5em 5em;

background-color: #ccc;

background-image: linear-gradient(90deg, #999 .05em, transparent .05em), linear-gradient(#999 .05em, transparent .05em);

transform: perspective( 400px) rotateX( 45deg);

z-index: 0;

}

.stage {

width: 30em;

height: 30em;

position: absolute;

margin-top: 25%;

margin-left: 50%;

transform: translate(-50%, -50%);

perspective: 1000px;

}

/* Cube */

.cube {

width: 100%;

height: 100%;

position: absolute;

transform-style: preserve-3d;

}

.cube > div {

margin: 0;

top: 5em;

left: 5em;

width: 20em;

height: 20em;

display: block;

position: absolute;

opacity: 0.5;

}

.cube .front {

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

background: red;

}

.cube .back {

transform: rotateX( 180deg) translateZ( 10em);

background: green;

}

.cube .right {

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

background: blue;

}

.cube .left {

transform: rotateY( -90deg) translateZ( 10em);

background: yellow;

}

.cube .top {

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

background: orange;

}

.cube .bottom {

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

background: purple;

}

/* Controls */

.controls {

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: 1em;

width: 250px;

margin: auto;

background: rgba(0, 0, 0, .5);

}

.form-row {

margin: .5em 0;

}

.form-row > * {

vertical-align: middle;

margin-right: .5em;

font-size: 1.5em;

}

label {

color: #fff;

}

input[type=text] {

width: 2.5em;

padding: .25em;

border: none;

border-radius: .5em;

}

input[type=range] {

-webkit-appearance: none;

}

input[type=range]:focus {

outline: none;

}

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

width: 100%;

height: 2px;

cursor: pointer;

animate: 0.2s;

box-shadow: 0px 0px 0px #000000;

background: #FFFFFF;

border-radius: 0px;

border: 0px solid #000000;

}

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

box-shadow: 0px 0px 0px #000000;

border: 0px solid #2497E3;

height: 20px;

width: 10px;

border-radius: 0px;

background: #FFFFFF;

cursor: pointer;

-webkit-appearance: none;

margin-top: -9px;

}

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

background: #FFFFFF;

}

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

width: 100%;

height: 2px;

cursor: pointer;

animate: 0.2s;

box-shadow: 0px 0px 0px #000000;

background: #FFFFFF;

border-radius: 0px;

border: 0px solid #000000;

}

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

box-shadow: 0px 0px 0px #000000;

border: 0px solid #2497E3;

height: 20px;

width: 10px;

border-radius: 0px;

background: #FFFFFF;

cursor: pointer;

}

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

width: 100%;

height: 2px;

cursor: pointer;

animate: 0.2s;

background: transparent;

border-color: transparent;

color: transparent;

}

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

background: #FFFFFF;

border: 0px solid #000000;

border-radius: 0px;

box-shadow: 0px 0px 0px #000000;

}

input[type=range]::-ms-fill-upper {

background: #FFFFFF;

border: 0px solid #000000;

border-radius: 0px;

box-shadow: 0px 0px 0px #000000;

}

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

box-shadow: 0px 0px 0px #000000;

border: 0px solid #2497E3;

height: 20px;

width: 10px;

border-radius: 0px;

background: #FFFFFF;

cursor: pointer;

}

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

background: #FFFFFF;

}

input[type=range]:focus::-ms-fill-upper {

background: #FFFFFF;

}