Im trying to rotate a <span> within an <h2> 90 degrees.
right now if I just set it to rotate nothing happens - but if I add a display:block to the span then it rotates. My problem is it pushes the rest of the h2 on to the next line.
Is there any way to have the h2 display on one line with the span rotated in middle of it?
here's how it should look
HTML:
<h2>Join <span class="flip-text">With</span><span class="flip-text">Your</span> Family</h2>
CSS:
span.flip-text{font-size:10px; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
Just like Christopher was suggesting, display: inline-block is the way to go:
http://jsfiddle.net/X85b6/
<h2>Join<span>with<br />your</span>Family</h2>
h2 {
font-size: 60px;
text-transform: uppercase;
}
h2 span {
font-size: 15px;
line-height: 16px;
display: inline-block;
position: relative;
bottom: 5px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Related
I've seen multiple implementations of a rotated Tableheader, and using this one:
table div.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
white-space: nowrap;
width:20px;
padding-left:5px;
margin-top: 125px;
}
Angular2 Template:
<div [class.rotated]="index != 0"><span>{{h.value}}</span></div>
With long labels however, this doesn't look neat.
Is there a chance to do a word-wrap ?
Remove white-space: nowrap; and add word-wrap: break-word;
div.rotated {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
width:50px;
padding-left:5px;
margin-top: 125px;
word-wrap: break-word;
text-align:center;
}
<div class="rotated" ><span>{{h.value}}</span></div>
I'm trying to rotate an parent div with some child div's, and than rotate the spans inside the child div's back so that the text is still readable...
Here's an JSFiddle
The HTML:
<div id="bt_container">
<div class="row_container">
<div><span>col1.1</span>
</div>
<div><span>col1.2</span>
</div>
<div><span>col1.3</span>
</div>
<div><span>col1.4</span>
</div>
</div>
<div class="row_container">
<div><span>col2.1</span>
</div>
<div><span>col2.2</span>
</div>
<div><span>col2.3</span>
</div>
<div><span>col2.4</span>
</div>
</div>
</div>
And the CSS:
#bt_container {
width: 1000px;
height:600px;
border: 1px solid #333;
}
.row_container {
margin: 10px;
border: 1px solid red;
}
.row_container div {
width:70px;
height: 70px;
border: 1px solid blue;
background: url('http://i.imgur.com/wI9t0bj.png');
background-size: cover;
}
.row_container div {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.row_container div span {
color: white;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
But the span isn't rotating back ( it's not rotating on it's own ). So does anybody knows what i do wrong? / What do i have to do to make the text readable again?
Put a display: block; on your span in order to rotate it.
Add display:inline-block or display:block to the span. Or just use block elements instead of span.
working fiddle
edit display and padding (to show entire span text)
.row_container div span {
color: white;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
display:inline-block;
padding-left:20px;
}
In this page following CSS to draw 12 point burst, how can I put some text inside it (in current form it does not show text inside text, I test z-index without success)?
How can I draw a 12 burst border in it most clean manner?
#burst-12 {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
}
#burst-12:before, #burst-12:after {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
}
#burst-12:before {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
#burst-12:after {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
}
All you need is to nest another element inside the burst container:
<div id="burst-12"><span>I am the text</span></div>
Then you can style it the way you want:
#burst-12 span {
display:block;
position:absolute;
z-index:2;
}
You'll find a very basic example here.
I'm trying to create a side tag, as found here in it basic form. http://www.firstforturf.co.uk/quotation.php
I'm trying to do as much of it as possible using CSS rather than just putting in an image however I've encountered a problem.
Upon rotating the side DIV it is moved from the side of the page. I've tried setting the margin to 0 but it doesn't seem to be working.
If it helps, here are the CSS rules for sidetag.
color: #FFF;
height: 50px;
width: 200px;
position: fixed;
background-color: rgb(0,102,204);
font-size: 32px;
line-height: 50px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
top: 50%;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-rl;
Greatful if anyone could help. Cheers.
Use transform-origin:
-moz-transform-origin: 20px;
-ms-transform-origin: 20px;
-o-transform-origin: 20px;
-webkit-transform-origin: 20px;
transform-origin: 20px;
Take a look at -webkit-transform-origin. As your element is fixed, you may need to amend the transform origin accordingly.
You can use transform-orign:
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
try this link
So I'm using CSS to rotate some text from horizontal to vertical (90 degrees) like so:
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
writing-mode: tb-rl;
filter: flipv fliph;
My problem is that this shifts the text way outside of the container div. Is there a trick to keep it inside the container? Is there some anchor point that I could set? What is a cross browser way to adjust post?
You could pull it back in with a few CSS properties...
#whatever {
position: relative;
top: -4px;
right: -10px;
}
Alternatively, you could play with the transform-origin property:
transform: rotate(-90deg);
transform-origin:20% 40%;
-ms-transform: rotate(-90deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(-90deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(-90deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(-90deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
Alternative method, which is more browser compliant and doesn't need information about amount of text beforehand:
.disclaimer {
position: absolute;
right: 10px;
bottom: 10px;
font-size: 12px;
transform: rotate(270deg);
-ms-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
line-height: 15px;
height: 15px;
width: 15px;
overflow: visible;
white-space: nowrap;
}
http://jsfiddle.net/d29cmkej/