mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 02:10:08 +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: {
|
||||
'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...
|
||||
@ -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...
|
||||
'?': doc('Show keyboard bindings',
|
||||
function(){ toggleKeyboardHelp() }),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user