mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
261 lines
5.6 KiB
HTML
261 lines
5.6 KiB
HTML
|
<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>
|