RTL and LTR icon positioning - css

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.

Related

I want to turn the back of my credit card. Not with Focus

I have a credit card component. It works when there is a hover effect, but does not work in the focus part (CCV) of the corresponding Input. How can I do it?
Component Full Codes:
https://codepen.io/veronicadev/pen/VXqZgR (not my codes)
HTML Element
<input-mask id="special-cvc-input" v-model="cardCvc" type="text" mask="999"></input-mask>
Working Hover CSS Codes
.card:hover .card__front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.card:hover .card__back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}
Not Working Focus CSS Codes
#special-cvc-input:focus .card_front{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
#special-cvc-input:focus .card__back{
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
}

Change
.card:hover .card__front
on
#special-cvc-input:focus + .card .card__back

How can you add a class in CSS to animate it on the page?

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");
});

Small Gap on Safari when using transform: translateX

I am using transform: translateX in order to be able to create a sliding effect.
The code works fine under Chrome.
In safari, in some screen resolutions and sometimes under firefox I get a small gap during the animation.
When the animated layer stops the gap dissapears.
Initially I have a
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
And after hover, I have a:
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
I have a makeup of my code here:
https://jsfiddle.net/e197mrsb/40/
I would be grateful if someone could help.

use margin 0 on hover class .....

How to flip the glyphicon icon

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

After rotation a box the box is different. (css transform preserve-3d rotate)

I'am trying to rotate a box with text like a slot-machine. I use pure css.
I think it works so far but i do have a problem that the rotated-box is smaller after rotation.
Here is my code:
jsfiddle
The main-code is done here:
#category_wrapper.show-unten{
-webkit-transform: translateZ(-5px) rotateX(90deg);
-moz-transform: translateZ(-75px) rotateX(90deg);
-ms-transform: translateZ(-75px) rotateX(90deg);
-o-transform: translateZ(-75px) rotateX(90deg);
transform: translateZ(-75px) rotateX(90deg);
}
Is this a bug or do I something wrong?

only use this:
#category_wrapper.show-unten{
-webkit-transform: translateZ(-5px) rotateX(90deg);
-moz-transform: translateZ(-75px) rotateX(90deg);
-ms-transform: translateZ(-75px) rotateX(90deg);
-o-transform: translateZ(-75px) rotateX(90deg);
transform: translateZ(0px) rotateX(90deg);
}
the changes at last line see==> transform: translateZ(0px) rotateX(90deg);
and use this:
transform: rotateX(-100deg) translateZ(75px); //instead of -90 deg in class .unten
i updated your jsfiddle =>Jsfiddle

Resources