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;
}