I was curious as to if you can impact italic text with more of a slant with CSS? If so, how can this be accomplished?
You can simulate a custom slant with CSS3 skew transformations (although it will not look as great as a real italic font).
Here's an example:
HTML:
<p class="slant">Some text</p>
CSS
.slant {
-moz-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
-webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
transform: scale(1) rotate(0deg) translate(0px, 0px) skew(30deg, 0deg);
}
You can also use
font-style: oblique 50deg;
(you can change 50 to what angle you want)
With standard font-style in CSS, it is not possible to customise the italic state.
This is up to the browsers own preference and the fonts italic state.
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 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 .....
I have the following CSS:
.progress-bar {
transform: rotate(0deg) scale(1) skew(-50deg) translate(2px);
-webkit-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px);
-moz-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px);
-o-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px);
-ms-transform: rotate(0deg) scale(1) skew(-50deg) translate(2px);
}
...and would like to refactor this with the Compass Transform mixin.
There are no examples in the documentation, so I tried this as a shot in the dark:
.progress-bar {
#include transform (0deg, 1, -50deg, 2px);
}
...and get this error:
Syntax error: Mixin transform takes 2 arguments but 4 were passed.
Is there a way to do this with Compass Transform?
You have to specify what transforms to use, separated by spaces. eg:
#include transform(rotate(-135deg) skew(-10deg, -10deg));
I believe it should be space separated list of transforms rather than comma-separated.
.progress-bar {
#include transform (rotate(0deg) scale(1) skew(-50deg) translate(2px));
}
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