I have a Bootstrap v4.0.0 template which is LTR direction, I want to change whole template to RTL Direction, I used these following methods:
<html dir="rtl">
<body dir="rtl" >
body { direction:rtl; }
html { direction:rtl; }
https://github.com/MahdiMajidzadeh/bootstrap-v4-rtl (bootstrap-rtl.css)
but these methods not working.
**
What's the best way to completely change page direction like a mirror
FLIP HORIZONTAL? (RTL Direction)
**
This following CSS code, it will change direction of page based on
Flip Horizontal, but how to reservse it after that? (Please have a
look into image in below)
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: fliph; /*IE*/
filter: fliph; /*IE*/
Thanks in advance
this code snippet flips/mirrors the page horizontally by reversing the horizontal scale
.mirror{
margin: 0 auto;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
float: right;
}
<div class="mirror">
mirrored text
</div>
<div>
not mirrored
</div>
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.
Is there a way to transpose a background image with CSS? (By "transpose" I mean that every pixel x,y in the source image ends up as pixel y,x in the background.)
Example
Source image:
Transposed image:
The result image can in fact be achieved after scaling it around Y axis with factor of -1 and then applying rotate transform of -90deg. Try this:
div.transposed {
-webkit-transform-origin:left top;
-webkit-transform:scaleY(-1) rotate3d(0,0,1,-90deg);
}
Demo
Note that we have to rotate -90deg instead of 90deg because we use scaleY before, it will turn the positive direction of Y axis from top-to-bottom (downwards) to bottom-to-top (upwards). In fact scaleY(-1) is equal to rotateX(180deg), in 3D, that means the positive direction of Z axis will be inverted (instead of outwards from screen, it will be inwards to the screen), hence the rotating angle should be -90deg instead of 90deg as we might think.
Please test the demo on webkit-based browsers.
If by "transpose" you mean this, it's similar with "rotate 270 deg and reflect vertically" or "rotate 90 deg and reflect horizontally".
There you can find full solution to "rotate background" problem: http://thewebthought.blogspot.com/2013/04/css-rotate-background-images.html
After rotating you can reflect image by transform:scaleY(-1) or transform:scaleX(-1).
If I understand your question you want to rotate the image 90 degrees. pixels along x become pixels along y. In CSS3 this is a transform.
#myParentElement
{
-webkit-transform: rotate(90deg) scaleX(-1) /* updated to add flip */;
-ms-transform: rotate(90deg) scaleX(-1);
transform: rotate(90deg) scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
to do this to a background image you would need to apply the CSS transform to the parent of the element that has the background image. Apply another transform to the element so that its contents are not transformed.
#myParentElement
{
-webkit-transform: rotate(90deg) scaleX(-1);
-ms-transform: rotate(90deg) scaleX(-1);
transform: rotate(90deg) scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
#myElement
{
-webkit-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg);
filter: FlipH;
-ms-filter: "FlipH";
}
use this code to rotate the background 90 degrees on an element without affecting the element itself:
#myelement {
height: 164px;
overflow: hidden;
position: relative;
width: 79px;
}
#myelement:before {
background: url("http://i.stack.imgur.com/gMRiV.png") no-repeat;
content: "";
height: 79px;
left: -42px;
position: absolute;
top: 42px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
width: 164px;
z-index: -1;
}
and the html code:
<div id="myelement">test</div>
example:
http://jsfiddle.net/fs4Dz/
Is there a way to animate only one transform function? For example i only want my transition on scale function. How will i do this
.my-class {
transition: transform;
}
.large {
transform: scale(2) rotate(90deg);
}
<div class="my-class"></div>
<div class="my-class large"></div>
I played around with your code a little and YES you can. Just assign the different transform functions to different classes and use only those classes that you want...like so.
Importantly DO NOT FORGET to use the respective browser supported engines when using animations to make it work. Here is a list of various browsers supporting various animation features.
http://css3.bradshawenterprises.com/support/
.my-class {
transition: transform;
}
.scale_and_rotate {
-webkit-transform: scale(2) rotate(90deg);
-moz-transform: scale(2) rotate(90deg);
-ms-transform: scale(2) rotate(90deg);
-o-transform: scale(2) rotate(90deg);
}
.scale_class {
-webkit-transform: scale(2); // Safari and Chrome(Engine:-Webkit)
-moz-transform: scale(2); // Mozilla(Engine:-Gecko)
-ms-transform: scale(2); // IE(Engine:-Trident)
-o-transform: scale(2); // Opera(Engine:-Presto)
}
.rotate_class {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
}
and finally you can apply these classes depending on your requirements
<div class="my-class"></div>
<div class="my-class scale_class"></div> // only scale function
<div class="my-class rotate_class"></div> // only rotate function
<div class="my-class scale_and_rotate"></div> // both scale and rotate function
Check the JSFiddle here
If you want to scale and rotate together then the class given by you should work.
And also you can look into CSS #keyframes to achieve this. Here are few good tutorials
https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes
http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/
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;