I'm trying to position one element to the left and one to the right of the browser window, both contains an ul
with CSS transform rotate. I have managed to position .rotate-left
and its ul
to the left, but I have been unable to position the ul
inside .rotate-right
to the right. (It needs to be visible on a horizontal line from right to left if transform is not supported.)
CSS:
.rotate-left ul li,
.rotate-right ul li {
display: inline;
}
.rotate-left {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 10em;
white-space: nowrap;
background: silver;
}
.rotate-left ul {
display: inline-block;
position: fixed;
top: 0;
bottom: 0;
height: 1.5em;
margin: auto;
background: red;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
}
.rotate-right {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 10em;
white-space: nowrap;
background: silver;
}
.rotate-right ul {
position: fixed;
top: 0;
bottom: 0;
right: 0;
height: 1.5em;
margin: auto;
background: red;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-webkit-transform: rotate(90deg) translate(-50%, 50%);
-moz-transform: rotate(90deg) translate(-50%, 50%);
}
HTML:
<div class="rotate-left">
<ul>
<li>left</li>
<li>left</li>
<li>left</li>
</ul>
</div>
<div class="rotate-right">
<ul>
<li>right</li>
<li>right</li>
<li>right</li>
</ul>
</div>
-
Demo: http://codepen.io/anon/pen/FtyEG
I have built upon this 100% height block with vertical text.
If what you are looking for is a way to set type vertically, you're best bet is probably CSS writing-mode . The rotation property of Internet Explorer's BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.
The spinning of text on mouse hover is known as the Spin Effect or the Rotation Effect. In this effect, each alphabet of the word is rotated along with any one of the axes (preferably Y-axis). Each word is wrapped inside in <li> tag and then using CSS:hover Selector selector we will rotate each alphabet on Y-axis.
rotate() The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it. Its result is a <transform-function> data type.
I solved it and cleaned the code up a bit.
.left,
.right {
position: fixed;
top: 0;
bottom: 0;
height: 1.5em;
margin: auto;
}
.left {
left: 0;
-webkit-transform-origin: 0 50%;
-moz-transform-origin: 0 50%;
-ms-transform-origin: 0 50%;
-o-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotate(-90deg) translate(-50%, 50%);
-moz-transform: rotate(-90deg) translate(-50%, 50%);
-ms-transform: rotate(-90deg) translate(-50%, 50%);
-o-transform: rotate(-90deg) translate(-50%, 50%);
transform: rotate(-90deg) translate(-50%, 50%);
}
.right {
right: 0;
-webkit-transform-origin: 100% 50%;
-moz-transform-origin: 100% 50%;
-ms-transform-origin: 100% 50%;
-o-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transform: rotate(90deg) translate(50%, 50%);
-moz-transform: rotate(90deg) translate(50%, 50%);
-ms-transform: rotate(90deg) translate(50%, 50%);
-o-transform: rotate(90deg) translate(50%, 50%);
transform: rotate(90deg) translate(50%, 50%);
}
Demo: http://codepen.io/anon/pen/LHeaB
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With