I'm working on the international website now, and one of its' languages is Arabic. Due to Arabic culture, whole interface must be mirrored vertically (obviously to flip sides, not only text direction).
I already tried to use the trick with transform: rotateY(180deg) on container and transform: rotateY(180deg) on each child node, but got an issue that my interface totally disppeared. Tried to transform: scale(-1, 1) with same result. backface-visibility: visible added to each node of document.
Do you have any idea how to mirror website interface without writing separate stylesheets and other painful things?
OK, I just recreated my problem here, maybe this can help: https://jsfiddle.net/z7ksof29/3/
For me this is working:
html {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Related
This question already has answers here:
How can I apply multiple transform declarations to one element?
(5 answers)
Closed 6 years ago.
So, I have a div, like this:
<div class="rotate-90"></div>
and the css:
.rotate-90
{
transform: rotate(90deg);
}
and I want to add another class to the div, named "scale-2", like this:
<div class="rotate-90 scale-2"></div>
.scale-2
{
transform: scale(2);
}
but when I try to combine them, the second class overrides the first one, so I get only a scaled div, and not rotated.
So, how can I combine the transforms without writing the code twice or combining the classes codes?
Thanks :)
Update 2022
At the end of last year the W3C published the working draft for "CSS Transforms Module Level 2".
This spec adds new transform functions and properties for three-dimensional transforms, and convenience functions for simple transforms.
It adds "Individual Transforms":
translate
scale
rotate
As the browser-support is over 85% it should be usable, if your project does not have to support old browsers.
So you should be able to do this from now on:
.rotate-90
{
rotate: 90deg;
}
.scale-2
{
scale: 2;
}
Here is a nice introduction-video:
"A new way to do CSS transforms!" by Kevin Powell.
Original Answer:
Transform-rules get overridden, like any other rules.
You can however combine the transforms in one rule:
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
}
If combining the two classes isn't your wish (which I totally don't understand, but respect), and if your framework only has these two effects, than you could use zoom for the scale-rule:
.scale-2 {
zoom: 2;
}
Because you are using transform property again and its overriding previous one.
You can use both in one transform like this
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
}
Transform property should be used with prefix to let it work in all browsers like this
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
-moz-transform: rotate(90deg) scale(2);
-ms-transform: rotate(90deg) scale(2);
-webkit-transform: rotate(90deg) scale(2);
-o-transform: rotate(90deg) scale(2);
}
I have this html character:
<div class="rotate">>></div>
I want this character facing down, for example.
I found this css, it seems not working.
.rotate{
webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
how to rotate?
jsfiddle
Replace webkit-transform: rotate(-90deg); by-webkit-transform: rotate(-90deg); there was typo you missed -.
Fiddle: https://jsfiddle.net/pzawLfgz/3/
If you're trying to rotate a span instead you need to change its display property.
.rotate-span {
display: inline-block;
transform: rotate(18deg);
}
.rotate-div {
transform: rotate(-18deg);
}
<div class="rotate-div">>></div>
<span class="rotate-span">>></span>
.rotate{
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
https://jsfiddle.net/pzawLfgz/2/
and notice this:
It is important that after the special imagined to for old browser
versions CSS commands generally comes last. This then the browser
always delivers the last recognized command and the broadly defined is
better than anything that can even slightly differ in their
implementation. Therefore, please always structured as follows: from
the particular to the general
Is there a way to rotate IE7 90% (the whole page)? I tried to rotate body and HTML element 90 degree by using CSS, but scroll bars are displaying because the width and height are not fix the window. I just want to rotate whole html 90% and the width and height are fix the window. Please help me.
How can I do that? (Maybe using CSS or something else). Thank so much.
Sorry about my English.
I have found the following links which may help you:
https://code.google.com/p/jqueryrotate/wiki/Examples
or perhaps:
http://raphaeljs.com/
Raphael supports rotation for IE6 onwards, I hope this helps you in your research.
Use below code that will support in all browser,
/*rotate 60 degrees*/
#rotate60 {
/*General*/
transform: rotate(60deg);
/*Firefox*/
-moz-transform: rotate(60deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(60deg);
/*Chrome, Safari*/
-webkit-transform: rotate(60deg);
/*Opera*/
-o-transform: rotate(60deg);
/*alter opacity*/
opacity:0.6;
filter:alpha(opacity=60);
}
/*rotate 90 degrees*/
#rotate90 {
/*General*/
transform: rotate(90deg);
/*Firefox*/
-moz-transform: rotate(90deg);
/*Microsoft Internet Explorer*/
-ms-transform: rotate(90deg);
/*Chrome, Safari*/
-webkit-transform: rotate(90deg);
/*Opera*/
-o-transform: rotate(90deg);
/*alter opacity*/
opacity:0.4;
filter:alpha(opacity=40);
}
and use overflow hidden for scrolling part.
What is the proper syntax for the css "transform" property in preprocessor LESS? The following, for example, throws me an error:
.transform(scale(1.1)) {
-webkit-transform: #transform;
-moz-transform: #transform;
-ms-transform: #trasnform;
-o-transform: #transform;
transform: #transform;
}
The error: variable "transform" is not defined. If transform doesn't work for scaling in less css, is there an alternative?
http://less2css.org/
Edit: changed title, and asked a related, more pertinent question:
How can I specify on-the-fly scaling using only less css and hovers?
The #transform variable is never defined:
.transform(#transform) {
-webkit-transform: #transform;
-moz-transform: #transform;
-ms-transform: #transform; /* note that you have #trasnform here */
-o-transform: #transform;
transform: #transform;
}
.foo {
.transform(scale(1.1));
}
I have to do a web page with some perspective texts on it's menu and contents. Following is a link to an image of the effect I should achieve. Is it possible? Where to start? I'm clueless and don't even know what's the best to do. I appreciate any help.
http://goo.gl/Wlz5b
Rotating text
If you just need to rotate text elements, that can be done with CSS3, using a 2D-transform rotation.
Supporting IE8 and earlier would require using an IE matrix filter (and some extra work to position the text correctly).
JSFiddle Demo
HTML
<div class="content">
<p class="text text1">This is a short sentence.</p>
<p class="text text2">This is a second sentence.</p>
<p class="text text3">This is a third sentence.</p>
</div>
CSS
.text {
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.text1 {
-webkit-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
transform: rotate(-4deg);
}
.text3 {
-webkit-transform: rotate(4deg);
-moz-transform: rotate(4deg);
-ms-transform: rotate(4deg);
transform: rotate(4deg);
}
3D rotation
If you need true 3D perspective (such that the text is larger on one end than the other), that will be tougher to manage cross-browser. The mock-up in the question doesn't appear to have 3D perspective.