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
Related
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";
}
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.
I'm setting everything in a div tag to appear horizontal. However i have elements in this div tag that i want to appear vertical.
My horizontal styled div is
/* 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);
How would i effectively get rid of this transformation on a seperate div?
If you want to reset it on the child element, undo the rotation ( http://jsfiddle.net/yDGqz/):
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
You might want to set the transform-origin property to change the rotation origin of the element.