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));
}
Related
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">
Compiled css
.fa-rotate-90 {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg); }
SCSS
$fa-css-prefix : 'fa';
#mixin fa-icon-rotate($degrees, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
.#{$fa-css-prefix}-rotate-90 { #include fa-icon-rotate(90deg, 1); }
Why I got unexpected result filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=$rotation);
Can anyone please point out what mistake in this scss.
As I had mentioned earlier in comments, for this case we need to make use of interpolation like in the below code block to get the value of the $rotation variable printed. The syntax for interpolation is #{$var}. Interpolation is required because the variable's value needs to be placed within another string and then the whole thing needs to be assigned as the value to a property.
$fa-css-prefix : 'fa';
#mixin fa-icon-rotate($degrees, $rotation) {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation});
-webkit-transform: rotate($degrees);
-moz-transform: rotate($degrees);
-ms-transform: rotate($degrees);
-o-transform: rotate($degrees);
transform: rotate($degrees);
}
.#{$fa-css-prefix}-rotate-90 { #include fa-icon-rotate(90deg, 1); }
I am using in my app the IcoMoon App fonts, for symbols.
At some part of my app, I like to use a rotating arrow by using the CSS3 Animation options, but for some reason, this doesn't work for me.
You can see my live code in FiddleJS
As you can see, in the element
<i class="loading icon-progress rotate"></i>
I have implement all the appropriate classes, but the animation does not run. Can somebody to help me ?
Am I doing something wrong ?
NOTE: I also have try the following in my CSS Code
.rotate
{
....
}
but still no results
The font I have installed is the following : http://i.icomoon.io/public/temp/9c89e0f9cb/BusinessDirectory/style.css
I've looked at your fiddle and if you remove the top: 0px and left: 0px property in each animation step, the animation works.
This link explains why:
Stackoverflow - Multiple properties in keyframe
I've tried that with percentage, em and rem and it seems like positional properties are not wanted in your keyframes.
#keyframes rotationAnimation
{
0%
{
transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
100%
{
transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
}
#-moz-keyframes rotationAnimation
{
0%
{
-moz-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
100%
{
-moz-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
}
#-webkit-keyframes rotationAnimation
{
0%
{
-webkit-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
100%
{
-webkit-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
}
#-o-keyframes rotationAnimation
{
0%
{
-o-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
100%
{
-o-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
}
#-ms-keyframes rotationAnimation
{
0%
{
-ms-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
100%
{
-ms-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg);
}
}
Above code works - funny thing if you use margin-* properties in one of the keyframes the margin gets animated not the rotate.
I've not enough CSS3 expertize to know why :/
edit:
Okay I've played a little more aaaand you need to write additional properties into the *-transform like
#-webkit-keyframes rotationAnimation
{
0%
{
-webkit-transform : rotate(0deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg), left:0,top: 0;
}
100%
{
-webkit-transform : rotate(360deg) scaleX(1) scaleY(1) skewX(0deg) skewY(0deg), left:0, top:0;
}
}
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
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.