I want to undo older css transform applied to an element and set new rule.
In css we regularly use !important in such cases to override the higher priority rule, but it looks like !important is not taking effect on a transform property:
.mk-flipbox-front {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
I want to override this to:
.mk-flipbox-front {
-webkit-transform: translateX(100%) rotateY(0deg);
transform: translateX(100%) rotateY(0deg);
}
but when I use !important like this:
transform: translateX(100%) rotateY(0deg) !important;
It breaks and will not work.
Any chance we can use !important on a multiple value transform?
To answer your question
Any chance we can use !important on a multiple value transform?
You can use !important the way you are using like in any other property
If your !important rule is not working is because of CSS specificity and/or CSS inheritance
Don't use !important
Instead be more specific, and use a parent selector (or even a sibling selector) to override it
something like this:
.mk-flipbox-front {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
.parent .mk-flipbox-front {
-webkit-transform: translateX(100%) rotateY(0deg);
transform: translateX(100%) rotateY(0deg);
}
<div class="parent">
<div class="mk-flipbox-front">test</div>
</div>
Related
This question already has answers here:
How can I apply multiple transform declarations to one element?
(5 answers)
Closed 6 years ago.
So, I have a div, like this:
<div class="rotate-90"></div>
and the css:
.rotate-90
{
transform: rotate(90deg);
}
and I want to add another class to the div, named "scale-2", like this:
<div class="rotate-90 scale-2"></div>
.scale-2
{
transform: scale(2);
}
but when I try to combine them, the second class overrides the first one, so I get only a scaled div, and not rotated.
So, how can I combine the transforms without writing the code twice or combining the classes codes?
Thanks :)
Update 2022
At the end of last year the W3C published the working draft for "CSS Transforms Module Level 2".
This spec adds new transform functions and properties for three-dimensional transforms, and convenience functions for simple transforms.
It adds "Individual Transforms":
translate
scale
rotate
As the browser-support is over 85% it should be usable, if your project does not have to support old browsers.
So you should be able to do this from now on:
.rotate-90
{
rotate: 90deg;
}
.scale-2
{
scale: 2;
}
Here is a nice introduction-video:
"A new way to do CSS transforms!" by Kevin Powell.
Original Answer:
Transform-rules get overridden, like any other rules.
You can however combine the transforms in one rule:
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
}
If combining the two classes isn't your wish (which I totally don't understand, but respect), and if your framework only has these two effects, than you could use zoom for the scale-rule:
.scale-2 {
zoom: 2;
}
Because you are using transform property again and its overriding previous one.
You can use both in one transform like this
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
}
Transform property should be used with prefix to let it work in all browsers like this
.rotate-90.scale-2 {
transform: rotate(90deg) scale(2);
-moz-transform: rotate(90deg) scale(2);
-ms-transform: rotate(90deg) scale(2);
-webkit-transform: rotate(90deg) scale(2);
-o-transform: rotate(90deg) scale(2);
}
Is there any way to append new transform property to existing properties?
For example: I have a div.animation, which has the following definition
.animation {
transform: translateX(-50%) translateY(-50%);
}
Now I want to append transform: scale(1) to the same element:
.animation.active {
transform: scale(1);
}
Obviously if I do that, it will override translateX and translateY properties. Is there any way to be able to append another transform property without overriding - the same way as you can do it with border-left and other CSS attributes?
No. There's no subproperties to transform.
To append multiple transforms you'd need to repeat the previous ones:
.animation {
transform: translateX(-50%) translateY(-50%);
}
.animation.active {
transform: translateX(-50%) translateY(-50%) scale(1);
}
Let's say I have 2 pics. Pic A in front of pic B. I want B to rotate when I hover A. Here's my HTML code
<div id="nav">
<img class="button" src="images/ornament.png"/>
<img class="circle" src="images/profile.png"/>
</div>
And my CSS
.circle:hover .button
{
transition: 3s;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate (360deg);
}
Please someone help me with this. Thanks a lot!
CSS currently can't transverse the DOM, therefore it wouldn't be possible in this case. You would need JavaScript in order to do that.
In pure CSS, you could, however, do the opposite. Changing the order of the markup:
<img class="circle" src="//.." />
<img class="button" src="//.." />
EXAMPLE HERE
Either use the adjacent sibling combinator, +, or the general sibling combinator, ~.
.circle:hover + .button {
transition: 3s;
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate (360deg);
}
Using the same HTML, you could also change the visual order by floating the element(s) in the opposite direction. (example)
Aside from this, it's worth noting that you were using .circle:hover .button; which will select an element with class button that is a descendant of a element with class .circle this is in the :hover state.
What is the proper syntax for the css "transform" property in preprocessor LESS? The following, for example, throws me an error:
.transform(scale(1.1)) {
-webkit-transform: #transform;
-moz-transform: #transform;
-ms-transform: #trasnform;
-o-transform: #transform;
transform: #transform;
}
The error: variable "transform" is not defined. If transform doesn't work for scaling in less css, is there an alternative?
http://less2css.org/
Edit: changed title, and asked a related, more pertinent question:
How can I specify on-the-fly scaling using only less css and hovers?
The #transform variable is never defined:
.transform(#transform) {
-webkit-transform: #transform;
-moz-transform: #transform;
-ms-transform: #transform; /* note that you have #trasnform here */
-o-transform: #transform;
transform: #transform;
}
.foo {
.transform(scale(1.1));
}
I have been looking over this example and wanting to take it up a notch, I am trying for the number "1" card to start off like this
(-webkit-transform: rotateZ( 160deg );) and rotateZ towards 0 WHILE flipping, I've been playing around with the matrix and skewing and cannot seem to get that effect.
You can give the same transform property multiple (space separated) transform-functions at the same time, something like this in your case;
#card .front {
transition: all 1s;
transform: rotateY(0deg) rotateZ(200deg);
}
#card.flipped .front {
transform: rotateY(180deg) rotateZ(0deg);
}
(The same applies to the backface)
Chrome-only demo: http://jsfiddle.net/4Z4sF/