to { opacity: 0; }
}
+img {
+ -webkit-transform-origin: top left;
+ -ms-transform-origin: top left;
+ transform-origin: top left;
+}
+
.rot90 {
- rotation: 90deg;
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+ -webkit-transform: rotate(90deg) translateY(-100%);;
+ -moz-transform: rotate(90deg) translateY(-100%);;
+ -o-transform: rotate(90deg) translateY(-100%);;
+ rotation: 90deg translateY(-100%);;
}
.rot180 {
- rotation: 180deg;
- -webkit-transform: rotate(180deg);
- -moz-transform: rotate(180deg);
- -o-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+ -webkit-transform: rotate(180deg) translate(-100%,-100%);
+ -moz-transform: rotate(180deg) translate(-100%,-100%);
+ -o-transform: rotate(180deg) translate(-100%,-100%);
+ rotation: 180deg translate(-100%,-100%);
}
.rot270 {
- rotation: 270deg;
- -webkit-transform: rotate(270deg);
- -moz-transform: rotate(270deg);
- -o-transform: rotate(270deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+ -webkit-transform: rotate(270deg) translateX(-100%);
+ -moz-transform: rotate(270deg) translateX(-100%);
+ -o-transform: rotate(270deg) translateX(-100%);
+ rotation: 270deg translateX(-100%);
}
#message {
.inputcontainer {
position: fixed;
width: 100%;
+ height: 100%;
}
#name {
display: block;
margin-right: auto;
font-size: 30pt;
}
+#shell_out {
+ display: none;
+ width: 80%;
+ height: 80%;
+ margin: 5em;
+ color: white;
+ background-color: black;
+ padding: 1em;
+}
.fade {
opacity: 0;
- animation-duration: 2s;
- animation-name: fadeOut;
-webkit-animation-duration: 2s;
-webkit-animation-name: fadeOut;
+ animation-duration: 2s;
+ animation-name: fadeOut;
}
.fit_view {