can any one tell me that how can i rotate a font awesome icon 180 degree. Actually i want to use a truck icon which is directed to right side but i found it left side rotated.
For ex:- <i class="fa fa-truck"></i>
This helped me:
.fa {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
Use transform css to achieve this:
.fa {
transform: rotateZ(180deg);
}
You can use the transform css option combine it with rotate() function.
See it in action
Related
This is my menu. As you see, the title of the slides appears horizontally.
This is how I would like them (in terms of text positioning):
As shown in this fiddle: http://jsfiddle.net/VRe8W/1/
You can rotate it by rotating the .image_title a with the css3 rotation function
transform: rotate(90deg) ;
-webkit-transform: rotate(90deg) ;
-moz-transform: rotate(90deg) ;
-o-transform: rotate(90deg) ;
-ms-transform: rotate(90deg) ;
Don't forget all the prefixes, otherwise it won't work in some browsers.
Is it possible to rotate (90-180-270 degrees), flip (horizontal/vertical) and resize (2x, 3x) icons easily in kendo-ui mobile?
You can do rotate easily with CSS transforms, something like this:
<style>
.km-home:after {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
You can flip an element with CSS transforms too:
<style>
.km-home:after {
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
</style>
You can also use scale to resize it - scale(2), etc...
However this question has nothing to do with Kendo UI :)
Here is an example implementation of previous and next buttons using a custom kendo mobile icon based on Bundyo's insights:
<a data-role="button" class="prev" data-icon="custom"></a>
<a data-role="button" class="next" data-icon="custom"></a>
CSS:
.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after,
.km-button.next .km-icon.km-custom:before, .km-button.next .km-icon.km-custom:after { content: "\e217" }
.km-button.prev .km-icon.km-custom:before, .km-button.prev .km-icon.km-custom:after { -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); }
When trying to apply a CSS transform with perspective I encounter a weird glitch in that the top half of the divs are unselectable. I have created a a quick demo here on jsfiddle
[The top selection of red boxes should be clickable and such]
Does anyone know how to fix this? I've looked at other similar errors but their solutions don't seem to work here.
Cheers
This should do the trick
.ca-item {
-webkit-transform: skewX(-5deg) scale(1, 1);
-moz-transform: skewX(-5deg) scale(1, 1);
-ms-transform: skewX(-5deg) scale(1, 1);
transform: skewX(-5deg) scale(1, 1);
background-color: blue;
position:relative;
width:1060px;
height:550px;
text-align:center;
}
Is it possible to create vertical or slanted column labels on the columns of a table, using CSS?
You can rotate text and elements using CSS3 transforms:
th[scope="col"] {
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
transform: rotate(-60deg);
}
Having nothing better to do, I put together a jsFiddle demo mimicking your entire table (EDIT: now with borders!).
I want to rotate an image when i hover on it.I use the follwing code to rotate.Bui it doesn't works....
#header #scn:hover{transform:rotate(45deg)};
It doesn't works for me.I am using Firefox 4.
Is there any way to perform transform and shadow effects in IE8.
You need to add a prefix for every rendering engine. For Firefox the prefix is -moz-.
To rotate an image in all supported browsers use:
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
For text shadows in IE8 you can use Shadow Filter (MSDN).
Plus there is CSS transforms workaround for Internet Explorer:
cssSandpaper.