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/
Related
HTML:
<img src="file:///C:/Users/magnu/Downloads/IMG_0342.JPG" alt="logo">
When I run the code in a browser locally on my PC, the image displays. But not when I view the site online. What am I doing wrong?
CSS:
img{
width:210px;
length:210px;
-webkit-transform:rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
position:absolute;
left:600px;
top:300px;
}
img{
width:210px;
height:210px;
-webkit-transform:rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
position:absolute;
left:100px;
top:100px;
}
<img src="http://images.all-free-download.com/images/graphiclarge/beautiful_nature_landscape_05_hd_picture_166223.jpg" alt="logo">
Put your image on server. There are many options using which you can put your image online like imgur, imgbb
instead of giving length give height to your image.
Hope this helps.
you have to set its location comppared with the location the html file for example if html file is located in c:/html/ and img is located in c:/ you should to set img src as follow src="../img.jpg" "../" to retun back by one folder
IN the src you have to write the path without "file///":
<img src="C:/Users/magnu/Downloads/IMG_0342.JPG" alt="logo">
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.
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);
If one class adds a rotation to an element and another class adds a scale, how do I define those in CSS without them stomping on each other.
<!-- HTML snippet -->
<div class="class1 class2"></div>
/* CSS snippet */
.class1 { transform:rotate(45deg); }
.class2 { transform:scale(0.5); }
In the above example the div would only be scaled because the transform property definition in class2 overrides the one in class one.
How do I get these two different style rules to apply these different transforms?
Unfortunately I believe you will need to do something along the lines of
<div class="class1"><span class="class2"></span></div>
DEMO
CSS
.class1 {
margin-top:100px;
width:100px;
height:30px;
background-color:#000;
transform:rotate(45deg);
} .class2 {
width:100px;
height:30px;
background-color:#00f;
transform:scale(0.5);
}
HTML
<div class="class1"></div>
<div class="class2"></div>
You might have to use 2 divs or once inside span
Try
/* CSS snippet */
.class1 { transform:rotate(45deg); }
.class1.class2 { transform:scale(0.5); }
I tried this and works perfect. i think it just needed to add old browsers pre keywords.
.class1{-moz-transform: rotate(20deg);
-wibkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg)}
.class2{-moz-transform: scale(.5);
-webkit-transform: scale(.5);
-o-transform: scale(.5);
-ms-transform: scale(.5)}