Im trying to use some CSS3 code to rotate my text but I think it doesn't get recognized?
CSS code:
.menu {
background-image:url('button.jpg');
cursor: pointer;
width: 61px;
height: 205px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
writing-mode: rl-tb;
}
HTML code:
<div id="menu-box">
<a class="menu" href="#" >HOME</a>
<a class="menu" href="#" >MYSELF</a>
<a class="menu" href="#" >PORTFOLIO</a>
<a class="menu" href="#" >CONTACT ME</a>
</div>
Im not sure what the problem is. I am missing something?
You can't transform inline elements; change the display value of .menu to inline-block instead.
Simplified example: http://jsfiddle.net/vg73f/
The <a> tags that your .menu class apply to are inline elements. They need to be block level elements in order for the transform to apply.
By adding display: block; we can see that a transform applies correctly.
http://jsfiddle.net/RvrBM/
Alternatively you could use display: inline-block; to allow the elements to rotate but stay in the inline arrangement.
http://jsfiddle.net/g5BRT/
Additionally, as Pavlo noted in the above comments, you are missing the unprefixed transform in your code. It should look like this:
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
Related
I would like to put "VERTICAL_TEXT" (third bootstrap column) with 90º rotation.
I have tried the following code:
<div class="row">
<div class="col-xs-2" style="background-color: yellow;">
<span>FOO1</span><br/>
<span>FOO2</span>
</div>
<div class="col-xs-8" style="background-color: red;">
<div>
<span>BAR1</span><br/>
<span>BAR2</span><br/>
<span>BAR3</span><br/>
<span>BAR4</span><br/>
</div>
</div>
<div class="col-xs-2" style="background-color: blue;">
<span class="rotate_text">VERTICAL TEXT</span>
</div>
</div>
.text_rotate {
/* Safari */
-webkit-transform: rotate(90deg);
/* Firefox */
-moz-transform: rotate(90deg);
/* IE */
-ms-transform: rotate(90deg);
/* Opera */
-o-transform: rotate(90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
The following fiddle ilustrates the issue:
https://jsfiddle.net/fbtg1zjx/
Edited:
I included the inline-block style and the text is now rotated as suggested in answers, however the text does not start in the upper part of the document. (the whole text includes 4 characters before N/00001. In green it is the span item, in blue the parent div.
You should put the text_rotate on the parent div.
Many CSS rules including Width, Height and such transforms doesn't work on elements with display:inline, an span is by default an inline elemnt, just give it a display:block or inline-block and it should work for you..
also try to add a general transform rule , transform:rotate(90deg);
to fix the second issue where the text is outside of the container you can use following CSS fixes :
.text_rotate {
/* add translate(50%) to transforms */
-webkit-transform: rotate(90deg) translate(50%);
-moz-transform: rotate(90deg) translate(50%);
-ms-transform: rotate(90deg) translate(50%);
-o-transform: rotate(90deg) translate(50%);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(90deg) translate(50%);
display:block;
}
or use transform origin
.text_rotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
transform: rotate(90deg);
display:block;
transform-origin: 0% 50%;
}
Please test and see which one is better for your situation.
Hope it helps
I am creating a thermometer for fundraising on my website. I have created a code to make the thermometer but it is at a horizontal line not a vertical line. Can you please help to rotate this?
Thanks
<div class="primary_font font-32px"><span class="font-16px"></span></div>
<div class='donation_raise_bar' style="background-color:#dee1dd;border-radius:9px;position:relative;width:800;height:26px;">
<span class="fundraise_raised_percentage" style="background-color:#fb1085;border-radius:20px;display:block;overflow:hidden;height:100%;line-height:1.5;min-width:1%!important;width:50%">
<center><span class="fundraise_amount_raised white_text arial_font font-12px bold-text">50%</span></center>
</span>
</div>
<div class="margin-top">
<div class="arial_font font-16px"><span class="bold-text"></span></div>
</div>
<div id="container_2"></div>
</div>
Use transform css property. Also Remember to use margins to fix it proper position.
<style>
.donation_raise_bar {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
</style>
If you want to rotate an element with css you can try like this
.rotate {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
.rectangle-box{
width: 200px;
height: 200px;
background-color: yellow;
}
now apply .rotate to your html element. Like
<div class="rectangle-box rotate">
</div>
Sorry, i can't comment because of my too low reputation.
You will probably need to use "transform-origin" css property when you start using rotate to have a better control on the axis of rotation.
I'm trying to create a div which can slant. Here is the code, but it's not working when I style it. CSS implementation works fine without any issues not sure what is the error with style parameter.
https://jsfiddle.net/vytcqbyd/
<div style="display:block;
background-color:yellow;
height:20px;
width:1px;
-ms-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
transform-origin: bottom left;">
</div>
CSS implementation:-
https://jsfiddle.net/4j8n45zz/1/
This question already has answers here:
How to use skew only in the parent element?
(4 answers)
Closed 7 years ago.
I want to make a header menu background with the help of parallelogram shape in css.
Problem is my header menu text is also show in parallelogram style . I want my text style as a straight/normal.
Here is my css code:-
.nav-bg{
background-color:rgba(2,2,2,0.9);
float:left;
Skew
-webkit-transform: skew(-60deg);
-moz-transform: skew(-60deg);
-o-transform: skew(-60deg);
transform: skew(-60deg);
}
<div class="nav-bg">
<ul class="nav navbar-nav"><li>test</li></ul>
</div>
Kindly advise me any solution.
body{
margin: 30px 150px;
}
.nav-bg {
width: 150px;/*for example*/
height: 150px;/*for example*/
background-color:rgba(2, 2, 2, 0.9);
-webkit-transform: skew(-60deg);
-moz-transform: skew(-60deg);
-o-transform: skew(-60deg);
transform: skew(-60deg);
}
.nav-bg ul{
color: #fff;
-webkit-transform: skew(60deg);
-moz-transform: skew(60deg);
-o-transform: skew(60deg);
transform: skew(60deg);
}
<div class="nav-bg">
<ul class="nav navbar-nav">
<li>test</li>
</ul>
</div>
I'm trying to rotate an arrow so it faces down, but not sure if this is possible
HTML
test <span id="rotate">»</span>
CSS
span#rotate{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
If you want to keep the element behaving like the inline span that it is, but also want to rotate it, then you will need to use display: inline-block; on it. This won't force it to a new line like display: block; naturally would.
Here is the correct code (jsFiddle: http://jsfiddle.net/joshnh/wZpP9/):
span#rotate{
display: inline-block;
*display: inline; /* Used to get IE 6 & 7 to behave */
zoom: 1; /* Used to get IE 6 & 7 to behave */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
}
You need the element to be a block element for rotate to work.
try adding:
display:block;
width:10px;
height:10px;