CSS Transition for Only One Type of Transform

CSS Transition for only one type of transform?

Yes! Now you can, because translate, scale and rotate have been moved to a separate css properties! (MDN: translate, scale, rotate)

So now you can do:

div{
   scale: 1;
   translate: 0;

   transition: scale 0.4s;
}

div.clicked{
   scale: 2;
   translate: 100px 200px; 
}

Example: http://jsfiddle.net/bjkdthr5/1/ (only scale will animate)

Transition only one kind of transform at a time in CSS

As you're overwriting your non-hover transform value on hover with the rotate, your arm gets positioned to its original position (like when there wouldn't be any translate on it).

As you can set multiple values for the transform property, just also add the translate on hover to it. This will keep your arm on the right position and just rotates it.

/* INITIAL PLACING OF THE IMAGES IN THEIR RIGHT PLACES */

img#Arm {

  position: relative;

  transform: translate(220px, 100px);

}

img#Body {

  position: relative;

  transform: translate(150px, 180px);

}

/* END OF PLACING OF THE IMAGES IN THEIR RIGHT PLACES */

/* THESE ARE THE TRANSFORMATIONS ON HOVER */

img#Arm {

  transform-origin: 200px 200px;

  transition: 1s ease-in-out;

}

section:hover img#Arm {

  transform: translate(220px, 100px) rotate(25deg);

}

/* END OF TRANSFORMATIONS ON HOVER */

/* THIS IS TO KEEP THE LOGO PARTS GROUPED TOGETHER DESPITE WINDOW CHANGING RESOLUTIONS */

section.wrapper {

  margin: 0 auto;

  /* this keeps the logo centered on the page */

  min-width: 800px;

  /* Minimum width of your wrapper element */

  max-width: 800px;

  min-height: 800px;

  max-height: 800px;

}

<section class="wrapper">

  <img id="Arm" src="https://i.stack.imgur.com/yCC87.png" />

  <img id="Body" src="https://i.stack.imgur.com/mmzDM.png" />

</section>

CSS transition only one transform function

I played around with your code a little and YES you can. Just assign the different transform functions to different classes and use only those classes that you want...like so.

Importantly DO NOT FORGET to use the respective browser supported engines when using animations to make it work. Here is a list of various browsers supporting various animation features.

http://css3.bradshawenterprises.com/support/

.my-class {
    transition: transform;
}

.scale_and_rotate {
    -webkit-transform: scale(2) rotate(90deg);
    -moz-transform: scale(2) rotate(90deg);
    -ms-transform: scale(2) rotate(90deg);
    -o-transform: scale(2) rotate(90deg);    
}

.scale_class {
    -webkit-transform: scale(2); // Safari and Chrome(Engine:-Webkit)
    -moz-transform: scale(2); // Mozilla(Engine:-Gecko)
    -ms-transform: scale(2); // IE(Engine:-Trident)
    -o-transform: scale(2); // Opera(Engine:-Presto)
}

.rotate_class {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

and finally you can apply these classes depending on your requirements

<div class="my-class"></div>
<div class="my-class scale_class"></div> // only scale function
<div class="my-class rotate_class"></div> // only rotate function
<div class="my-class scale_and_rotate"></div> // both scale and rotate function

Check the JSFiddle here

If you want to scale and rotate together then the class given by you should work.
And also you can look into CSS @keyframes to achieve this. Here are few good tutorials

https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

CSS Transition: one transform property, not the other

Not an ideal solution (from a purist's point of view), but have you considered wrapping the element inside another and just applying the transform to that one?

CSS transition only works one way and the element will only revert without transition

Remove transition: transform 2s; from main:hover, and put it inside main.

.main {

  width: 500px;

  height: 300px;

  background: red;

  transition: transform 2s;

  transform: perspective(1500px) rotateX(50deg);

}

.main:hover {

  transform: rotateX(0deg);

}

<div class="main"></div>

CSS3 transition only scale

As I mentioned in the comment above, just add the background:red in your scale:hover class.

.scale:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
background:red;
}

DEMO

---

Related Topics