Menu
I am trying to get a string with each individual letter rotated 90 degrees; however, I want to keep the "flow" of letters going left-to-right, not vertical. I also want to keep that "strikethrough" horizontal green line (see images below).
What's the simplest way to accomplish this? I prefer using JavaScript and/or CSS.
With the -transform: rotate CSS style I get the following:
<style type="text/css">
.rotate {
-webkit-transform: rotate(-90deg);
}
</style>
<body>
<div class="rotate">
<span style="color:#0C0; text-decoration:line-through;">
<span style="color:#000;">
A B C
</span></span></div>
What I would like to get is something like this, without resorting to a custom font.
790
Pure CSS:
<div class="letters">
<span>A</span><span>B</span><span>C</span>
</div>
.letters {
height:8px;
line-height:16px;
border-bottom:1px solid green;
position:relative;
}
.letters > span {
float:left;
-webkit-transform: rotate(-90deg);
}
Demo
162
Here's some js that should do the trick: http://jsfiddle.net/AYGDR/8/
$(function() {
$(".target").html(("<span>" + $(".target").html().split(" ").join("</span><span>") + "</span>"));
var rotate = 0;
$(".target span").each(function() {
rotate = rotate - 90
$(this).css({
"-webkit-transform": "rotate(" + rotate + "deg)",
"display": "inline-block"
});
});
});
And I accidentally threw in some bonus shifting rotation since I imagined that was part of the question.
24
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
