Spaces:
Sleeping
Sleeping
File size: 1,546 Bytes
b570cf2 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 |
.cube_container {
Margin:auto;
width: 200px;
height: 200px;
position: relative;
perspective: 1000px;
}
#solution_container {
background-color: #FFFFFF
}
#cube_div {
background-color: #e6e6e6
}
#button_container {
background-color: #FFFFFF
}
#cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
}
#cube figure {
margin: 0;
width: 200px;
height: 200px;
display: block;
position: absolute;
border: 1px solid black;
opacity:1.0;
background-color: #000000;
}
.sticker {
width: 33.3%;
height: 33.3%;
background-color: #000000;
border: 2px solid black;
float: left;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: white;
}
#cube .front {
transform: rotateY( 0deg) translateZ(100px);
}
#cube .back {
transform: rotateX( 180deg) rotateY(180deg) translateZ(-100px);
}
#cube .right {
transform: rotateY( -90deg) translateZ(-100px);
}
#cube .left {
transform: rotateY( 90deg) translateZ(-100px);
}
#cube .top {
transform: rotateX( 90deg) translateZ(100px);
}
#cube .bottom {
transform: rotateX( -90deg) translateZ(100px);
}
#cube {
/*transform: translateZ( -100px);*/
}
button {
border: 1px solid #0066cc;
background-color: #0099cc;
color: #ffffff;
padding: 5px 10px;
}
button:hover {
border: 1px solid #0099cc;
background-color: #00aacc;
color: #ffffff;
padding: 5px 10px;
}
button:disabled,
button[disabled]{
border: 1px solid #999999;
background-color: #cccccc;
color: #666666;
}
|