mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
added a simple experiment on stable positioning within a rotated/flipped element...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
94093098ec
commit
778d2f1dc6
260
ui/experiments/positioning-in-rotated-element.html
Executable file
260
ui/experiments/positioning-in-rotated-element.html
Executable file
@ -0,0 +1,260 @@
|
|||||||
|
<html>
|
||||||
|
<style>
|
||||||
|
|
||||||
|
.elem {
|
||||||
|
position:relative;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
margin: 10px;
|
||||||
|
background: gray;
|
||||||
|
|
||||||
|
background-image: -ms-linear-gradient(top, #787878 0%, #EFEFEF 100%);
|
||||||
|
background-image: -moz-linear-gradient(top, #787878 0%, #EFEFEF 100%);
|
||||||
|
background-image: -o-linear-gradient(top, #787878 0%, #EFEFEF 100%);
|
||||||
|
/* Webkit (Safari/Chrome 10) */
|
||||||
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #787878), color-stop(1, #EFEFEF));
|
||||||
|
/* Webkit (Chrome 11+) */
|
||||||
|
background-image: -webkit-linear-gradient(top, #787878 0%, #EFEFEF 100%);
|
||||||
|
background-image: linear-gradient(to bottom, #787878 0%, #EFEFEF 100%);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-set {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
|
background: silver;
|
||||||
|
font-size: 0px;
|
||||||
|
|
||||||
|
text-align: right;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin: 5px;
|
||||||
|
font-size: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.A {
|
||||||
|
background: Red;
|
||||||
|
}
|
||||||
|
.B {
|
||||||
|
background: Green;
|
||||||
|
}
|
||||||
|
.C {
|
||||||
|
background: Blue;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.elem:not(.rotated-0deg):not(.rotated-90deg):not(.rotated-180deg):not(.rotated-270deg):not(.flipped-h):not(.flipped-v),
|
||||||
|
.rotated-0deg {
|
||||||
|
border-bottom: solid black 2px;
|
||||||
|
}
|
||||||
|
.rotated-90deg {
|
||||||
|
border-right: solid black 2px;
|
||||||
|
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
-moz-transform: rotate(90deg);
|
||||||
|
-o-transform: rotate(90deg);
|
||||||
|
-ms-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
.rotated-180deg {
|
||||||
|
border-top: solid black 2px;
|
||||||
|
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
-moz-transform: rotate(180deg);
|
||||||
|
-o-transform: rotate(180deg);
|
||||||
|
-ms-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.rotated-270deg {
|
||||||
|
border-left: solid black 2px;
|
||||||
|
|
||||||
|
-webkit-transform: rotate(270deg);
|
||||||
|
-moz-transform: rotate(270deg);
|
||||||
|
-o-transform: rotate(270deg);
|
||||||
|
-ms-transform: rotate(270deg);
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
.flipped-h {
|
||||||
|
border-bottom: solid black 2px;
|
||||||
|
|
||||||
|
-webkit-transform: scaleX(-1);
|
||||||
|
-moz-transform: scaleX(-1);
|
||||||
|
-o-transform: scaleX(-1);
|
||||||
|
-ms-transform: scaleX(-1);
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
.flipped-v {
|
||||||
|
border-top: solid black 2px;
|
||||||
|
|
||||||
|
-webkit-transform: scaleY(-1);
|
||||||
|
-moz-transform: scaleY(-1);
|
||||||
|
-o-transform: scaleY(-1);
|
||||||
|
-ms-transform: scaleY(-1);
|
||||||
|
transform: scaleY(-1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.elem:not(.rotated-0deg):not(.rotated-90deg):not(.rotated-180deg):not(.rotated-270deg):not(.flipped-h):not(.flipped-v) .item-set,
|
||||||
|
.rotated-0deg .item-set {
|
||||||
|
bottom: 0px;
|
||||||
|
right: 0px;
|
||||||
|
}
|
||||||
|
.rotated-90deg .item-set {
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
|
||||||
|
/* the full height of the item-set... */
|
||||||
|
margin-right: 20px;
|
||||||
|
|
||||||
|
-webkit-transform: rotate(-90deg);
|
||||||
|
-moz-transform: rotate(-90deg);
|
||||||
|
-o-transform: rotate(-90deg);
|
||||||
|
-ms-transform: rotate(-90deg);
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
|
||||||
|
-webkit-transform-origin: top right;
|
||||||
|
-ms-transform-origin: top right;
|
||||||
|
transform-origin: top right;
|
||||||
|
}
|
||||||
|
.rotated-180deg .item-set {
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
-webkit-transform: rotate(180deg);
|
||||||
|
-moz-transform: rotate(180deg);
|
||||||
|
-o-transform: rotate(180deg);
|
||||||
|
-ms-transform: rotate(180deg);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
.rotated-270deg .item-set {
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
margin-bottom: 100%;
|
||||||
|
|
||||||
|
-webkit-transform: rotate(90deg);
|
||||||
|
-moz-transform: rotate(90deg);
|
||||||
|
-o-transform: rotate(90deg);
|
||||||
|
-ms-transform: rotate(90deg);
|
||||||
|
transform: rotate(90deg);
|
||||||
|
|
||||||
|
-webkit-transform-origin: bottom left;
|
||||||
|
-ms-transform-origin: bottom left;
|
||||||
|
transform-origin: bottom left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flipped-h .item-set {
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
|
||||||
|
-webkit-transform: scaleX(-1);
|
||||||
|
-moz-transform: scaleX(-1);
|
||||||
|
-o-transform: scaleX(-1);
|
||||||
|
-ms-transform: scaleX(-1);
|
||||||
|
transform: scaleX(-1);
|
||||||
|
}
|
||||||
|
.flipped-v .item-set {
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<script>
|
||||||
|
</script>
|
||||||
|
<body>
|
||||||
|
<p>
|
||||||
|
The goal here is to develop a simple CSS mechanism to rotate an
|
||||||
|
element yet keep it's content aligned correctly...
|
||||||
|
<br>
|
||||||
|
This solution is not wothout restriction but the apporeach works.
|
||||||
|
<ul>
|
||||||
|
<li> this approach introduces an extra orgonizing element <i>.item-set</i>
|
||||||
|
<li> <i>.item-set</i> must be of fixed width and height
|
||||||
|
(in this case 100% and 20px)
|
||||||
|
<li> combining flipping and rotation is at this point non-trivial
|
||||||
|
</ul>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div>0°:
|
||||||
|
<div class="elem">
|
||||||
|
<div class="item-set">
|
||||||
|
<div class="item A"></div>
|
||||||
|
<div class="item B"></div>
|
||||||
|
<div class="item C"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>90°:
|
||||||
|
<div class="elem rotated-90deg">
|
||||||
|
<div class="item-set">
|
||||||
|
<div class="item A"></div>
|
||||||
|
<div class="item B"></div>
|
||||||
|
<div class="item C"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>180°:
|
||||||
|
<div class="elem rotated-180deg">
|
||||||
|
<div class="item-set">
|
||||||
|
<div class="item A"></div>
|
||||||
|
<div class="item B"></div>
|
||||||
|
<div class="item C"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>270°:
|
||||||
|
<div class="elem rotated-270deg">
|
||||||
|
<div class="item-set">
|
||||||
|
<div class="item A"></div>
|
||||||
|
<div class="item B"></div>
|
||||||
|
<div class="item C"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>Flipped horizontally:
|
||||||
|
<div class="elem flipped-h">
|
||||||
|
<div class="item-set">
|
||||||
|
<div class="item A"></div>
|
||||||
|
<div class="item B"></div>
|
||||||
|
<div class="item C"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>Flipped vertically:
|
||||||
|
<div class="elem flipped-v">
|
||||||
|
<div class="item-set">
|
||||||
|
<div class="item A"></div>
|
||||||
|
<div class="item B"></div>
|
||||||
|
<div class="item C"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!--div>Flipped vertically and rotated 90°:
|
||||||
|
<div class="elem flipped-v rotated-90deg">
|
||||||
|
<div class="item-set">
|
||||||
|
<div class="item A"></div>
|
||||||
|
<div class="item B"></div>
|
||||||
|
<div class="item C"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -76,6 +76,14 @@ var KEYBOARD_CONFIG = {
|
|||||||
P: {
|
P: {
|
||||||
'ctrl+shift': 'F12',
|
'ctrl+shift': 'F12',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// NOTE: this is handled by the wrapper at this point, so we do
|
||||||
|
// not have to do anything here...
|
||||||
|
F11: doc('Toggle full screen view', function(){ toggleFullscreenMode() }),
|
||||||
|
F: {
|
||||||
|
ctrl: 'F11',
|
||||||
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// info overlay...
|
// info overlay...
|
||||||
@ -710,11 +718,6 @@ var KEYBOARD_CONFIG = {
|
|||||||
}),
|
}),
|
||||||
},
|
},
|
||||||
|
|
||||||
// NOTE: this is handled by the wrapper at this point, so we do
|
|
||||||
// not have to do anything here...
|
|
||||||
F11: doc('Toggle full screen view', function(){ toggleFullscreenMode() }),
|
|
||||||
F: 'F11',
|
|
||||||
|
|
||||||
// Help and info...
|
// Help and info...
|
||||||
'?': doc('Show keyboard bindings',
|
'?': doc('Show keyboard bindings',
|
||||||
function(){ toggleKeyboardHelp() }),
|
function(){ toggleKeyboardHelp() }),
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user