CODEWITHSUNDEEP
csscss-transforms
Ash
Ash

Reputation: 822

How can I apply multiple transform declarations to one element?

I have an element with two classes, one called "rotate" that will rotate the element 360 degrees and another called "doublesize" that will scale the element 2x its normal size:

.rotate {
    transform: rotate(0deg);
}

.rotate:hover {
    transform: rotate(360deg);
}

.doublesize {
    transform: scale(1);
}

.doublesize:hover {
    transform: scale(2);
}

http://jsfiddle.net/Sbw8W/

I'm guessing this does not work because the classes override each other's transform property?

I know that I could easily do this in one CSS rule like:

.doublerotatesize {
    transform: scale(1) rotate(0deg);
}

.doublerotatesize:hover {
    transform: scale(2) rotate(360deg);
}

But I would like to be able to apply each class separately from the other if it is possible.

Upvotes: 52

Views: 40657

Answers (5)

Temani Afif
Temani Afif

Reputation: 272762

Using CSS variables you can have this separation. The idea is to chain as many transformation as you want inside the element using CSS variables then later you update each variable individually:

div {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: red;
  transform:
    /* I prepared 3 placeholder so we can chain 3 transformation later */
    var(--t1,) /* we need "nothing" as fallbak*/
    var(--t2,) 
    var(--t3,);
}

.transitionease {
  transition: all 1s ease;
}

.transitionease:hover {
  transition: all 3s ease;
}

.rotate {
  --t1: rotate(0deg);
}

.rotate:hover {
  --t1: rotate(360deg);
}

.doublesize {
  --t2: scale(1);
}

.doublesize:hover {
  --t2: scale(2);
}
<div class="transitionease"></div>
<div class="transitionease doublesize rotate "></div>
<div class="transitionease doublesize"></div>

Upvotes: 22

Mike Gledhill
Mike Gledhill

Reputation: 29161

You can't do this using just CSS, but if you don't mind using some jQuery you can attach this effect:

var $elem = $('.cssDropPinImage');

$({deg: 0}).animate({deg: 360}, {
  duration: 600,
  step: function(now) {
    var scale = (2 * now / 360);
    $elem.css({
      transform: 'rotate(' + now + 'deg) scale(' + scale + ')'
    });
  }
});
body {
  padding: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://via.placeholder.com/40" class="cssDropPinImage">

Upvotes: 3

bramchi
bramchi

Reputation: 800

The question hints at a scale and rotate animation on hover. Another pragmatic way of solving this, is by rearranging the elements in the HTML and applying the individual transforms to the parent and the child, only responding to the hover on the parent element.

That looks something like this:

<div class="doublesize">
   <div class="rotate"></div>
</div>

.doublesize {
   transition: transform 1s ease;
}

.rotate {
   width: 100px; 
   height: 100px;
   background-color: red;   
   transition: transform 1s ease;
}

.doublesize:hover {
   transform: scale(2);    
}

.doublesize:hover .rotate {
   transform: rotate(360deg);
}

http://jsfiddle.net/n38csxy1/4/

I know this is quite a leap from the original setup, but I hope this perspective helps someone nevertheless.

Upvotes: 0

BoltClock
BoltClock

Reputation: 723518

I'm guessing this does not work because the classes override each other's transform property?

Correct. This is an unfortunate limitation as a side-effect of how the cascade works.

You will have to specify both functions in a single transform declaration. You could simply chain both class selectors together instead of creating a new class for a combined transform:

.doublesize.rotate {
    -webkit-transform: scale(1) rotate(0deg);
}

.doublesize.rotate:hover {
    -webkit-transform: scale(2) rotate(360deg);
}

... but as you can see, the issue lies in the transform property rather than in the selector.

This is expected to be rectified in Transforms level 2, where each transform has been promoted to its own property, which would allow you to combine transforms simply by declaring them separately as you would any other combination of CSS properties. This means you would be able to simply do this:

/* Note that rotate: 0deg and scale: 1 are omitted
   as they're the initial values */

.rotate:hover {
    rotate: 360deg;
}

.doublesize:hover {
    scale: 2;
}

... and take advantage of the cascade rather than be hindered by it. No need for specialized class names or combined CSS rules.

Upvotes: 57

enguerranws
enguerranws

Reputation: 8233

You can surely combine multiple animation, but not by combining CSS classes. See the first answer here : combining multiple css animations into one overall animation

The first part tells you how to combine animation with CSS with some parameters (delay, duration) :

.outside.animate {
   -webkit-animation-delay: 0s, .5s, .5s;
   -webkit-animation-duration: 500ms, 1000ms, 1000ms;
   -webkit-animation-name: button-bounce, rotate, skyblue;
}

For sure, you firstly need to define your animations.

Upvotes: 3

Related Questions