Is there any way to flip the glyphicon. I found Flip an Image CSS trick, but that does not work for the glyphicon. Please any suggestions
Like this
HTML
<i class="icon-rotate icon-flipped"></i>
CSS
.icon-flipped {
transform: scaleX(-1);
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
}
OR
http://fortawesome.github.io/Font-Awesome/examples/#rotated-flipped
Using glyphicons managed to make this work like so:
HTML
<span class="glyphicon glyphicon-search" id="my-glyphicon"></span>
CSS
#my-glyphicon {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
see JSFiddle here
Related
I have attached the below image URL , for that I have used below code,but I am not able to align icon right. Can anyone please help me out to revert the image or particular icon position, right to left.
.icon-alignleft:before {
content: "\e00a";
}
Thank you
May be this will help you
(flip image/icon)
.icon-alignleft:before {
content: "\e00a";
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.rtl-icon {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-ms-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
One way to do it would be to flip the container holding the icon horizontally using transform.
.icon-alignleft {
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
}
Hope this helps.
I don't want to rotate it - it's not 1998!
Can I purely flip this element when the is-expanded class is added?
.resources__icon {
#include icon('arrow-down-white', 28, 18);
}
.is-expanded.resources__icon {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
ScaleY can flip an image, not just "change the scale" - use scaleY instead of rotate
.resources__icon {
#include icon('arrow-down-white', 28, 18);
}
.is-expanded.resources__icon {
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
}
Try it: Replace translate to rotate please!
.rotate{
transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
}
1. None rotate
<br>
<img src="http://hocwebchuan.com/reference/tag/images/img_sakura.jpg" width="100">
<br>
2. Rotate
<br>
<img class="rotate" src="http://hocwebchuan.com/reference/tag/images/img_sakura.jpg" width="100">
I am trying to animate two images from the centre, the the opposite sides of each other.
One to the far left, and the other to the far right, with some text in the middle.
see jsFiddle
I have seen on a few websites now an is-visible css attribute (for example, something like this):
.image.is-visible {
left: 0%;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-ms-transform: translateY(0%);
-o-transform: translateY(0%);
transform: translateY(0%);
}
.image {
background-position: right;
-webkit-transform: translateX(45%);
-moz-transform: translateX(45%);
-ms-transform: translateX(45%);
-o-transform: translateX(45%);
transform: translateX(45%);
I have my transform: translateY(0%); on my jsFiddle, but how do you add a class, for example: is-visible to animate it on the page?
Add Class is probably done by a jQuery
https://api.jquery.com/addclass/
So you just need to define when the class should be added
Maybe while scrolling
Example:
http://codepen.io/LukeD1uk/pen/zvGQZN
Or if the document is loaded
$( document ).ready(function() {
$(".someclass").addClass("is-visible");
});
I'm just wondering if this shape I have in the image url is doable in css3 with webkit.
Here is a good source for CSS shapes
Just edit the class properties to your liking to get desired shape
CSS:
.parallelogramRight {
width:100px;
height:100px;
border:1px solid #000;
background:yellow;
transform: skew(-20deg);
-o-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
}
You can use the transform: skew() property.
http://codepen.io/anon/pen/tkdyx
Yes it is.
-moz-transform: skewX(-23deg);
-webkit-transform: skewX(-23deg);
-o-transform: skewX(-23deg);
-ms-transform: skewX(-23deg);
transform: skewX(-23deg);
Is there a way to rotate the text 90 degrees when inside a table:
Something like:
<tr>
<th class="bottomtop">
<span class="bottomtop">{{ task_definition }}</span>
</th>
</tr>
.bottomtotop {
transform:rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
I want the text to look like:
h
e
l
l
o
# with the actual letters rotated 90 degrees counter-clockwise.
I think your main problem is that your span has a class of bottomtop, but your CSS defines bottomtotop. I just added a display:block, and corrected the class name and it worked fine. http://jsfiddle.net/c5FzT/
.bottomtop {
display:block;
transform:rotate(270deg);
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
May be you want something like this
.bottomtotop {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
display:inline-block
}
The most important thing is that span is an inline element. transform doesn't work with that. So you need to use either block elements or use display:inline-block or display:block with span and of-course match the class name with markup. (you mentioned bottomtop in your markup but in your css it is bottomtotop)
Js Fiddle