appending another transform to existing properties - html

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

Related

CSS - add transform to element without removing the existing one [duplicate]

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

how to set !important on a multi value css transform?

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>

(CSS) skew img frame without distorting image

I'm making a website that contains many skewed elements, like this:
This isn't too bad, there are CSS transforms that could skew it. But how about this:
The image isn't distorted, just the frame is cropped in a skewed way. What's the easiest/best way to do this?
I think this should work for you. As a Mark commented on, clip-path is a nice way to go. There are tools for getting just the right path such as Clippy. Once you've got the path, you drop it right into your code. In my demo, I used it on the div wrapping the image, rather than on the image itself. I did it this way to keep border effects—added via pseudo-class—on top of the image.
Demo: http://codepen.io/antibland/pen/eZKxNa
I ended up using the following. It creates a skewed parent, then unskews the child, centering it and making it big enough to fill the skew's stick-out bits.
HTML
<div class="skewed">
<img src="images/sad-kid.jpg">
</div>
CSS
div.skewed {
position: relative;
height: 140px;
transform: skew(-2deg) rotate(2deg);
-webkit-transform: skew(-2deg) rotate(2deg);
-moz-transform: skew(-2deg) rotate(2deg);
overflow: hidden;
}
div.skewed > * {
width: 110%;
position: absolute;
top: 50%;
transform: skew(2deg) rotate(-2deg) translateY(-50%);
-webkit-transform: skew(2deg) rotate(-2deg) translateY(-50%);
-moz-transform: skew(2deg) rotate(-2deg) translateY(-50%);
}
OUTPUT
This is similar to Andy Hoffman's method, but supports a greater number of browsers.

LESS css "transform" syntax | on-the-fly scaling with LESS css?

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

Advanced CSS animations

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/