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); }
Related
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
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.
I am trying to add some randomisation by making elements rotate slightly based on being odd or even.
See JS fiddle
Essentially there is a style applied to odd and even using nth-child which should make every other one rotate at a different angle but it does not seem to apply the second...
ul.polaroidGrid li .polaroid:nth-child(even){
transform: rotate(-1deg) ;
-webkit-transform: rotate(-1deg) ;
-moz-transform: rotate(-1deg) ;
-o-transform: rotate(-1deg) ;
-ms-transform: rotate(-1deg) ;
}
ul.polaroidGrid li .polaroid:nth-child(odd) {
transform: rotate(1deg) ;
-webkit-transform: rotate(1deg) ;
-moz-transform: rotate(1deg) ;
-o-transform: rotate(1deg) ;
-ms-transform: rotate(1deg) ;
}
Example HTML for one item
<li>
<div class="polaroid">
<img src="images/makers/getbetter.jpg" />
<span class="polaroidTitle">Get Better Clothing</span>
getbetterclothing.com
</div>
<p>Clothing which draws inspiration from childhood toys and nature using fun illustrative styles.</p>
</li>
Each .polaroid is the first and only child of its parent, so they're all odd.
You want the odd and even lis.
I believe, that must be something like this:
ul.polaroidGrid li:nth-child(even) .polaroid{
}
ul.polaroidGrid li:nth-child(odd) .polaroid {
}
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 it to start from the bottom and go up
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
I can't remember if the CSS supports radians, but that may work as well. Of course, defining pi might be an issue!
HTML
<div class="rotate">
Text
</div>
CSS
.rotate{-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg);}
For firefox
.verticaltext {
writing-mode: tb-rl;
filter: flipV flipH;
}