Merging CSS transforms

Question

I am trying to merge a few different CSS transforms on an H3 element. The initial transform is to rotate the text -45deg, while the second set is sliding and fading the element in place.

h3 {
    -webkit-transform: rotate(-45deg); // rotate text
    -webkit-transition: -webkit-transform 0.6s, opacity 0.6s; // use when element is in view
}

// use when element is in view
.about-trans {
    h3 {
        opacity: 0;
        -webkit-transform: translateY(-60px);
        -moz-transform: translateY(-60px);
        transform: translateY(-60px);
    }
}

and you wish to preserve the rotation when the element is in view? Or you want to have a sequenced animation where you do anim1, anim2 etc. in a row — Matyas
– Matyas, Commented Jul 3, 2014 at 9:37

Matyas · Accepted Answer · 2014-07-03 09:38:08Z

2

If you wish to have multiple transofrmations applied just concatenate them like in the CSS below:

    h3 {
        -webkit-transform: rotate(-45deg); // rotate text
        -webkit-transition: -webkit-transform 0.6s, opacity 0.6s; // use when element is in view
    }

    // use when element is in view
    .about-trans {
        h3 {
            opacity: 0;
            -webkit-transform: translateY(-60px) rotate(-45deg);
            -moz-transform: translateY(-60px) rotate(-45deg);
            transform: translateY(-60px) rotate(-45deg);
        }
    }

answered Jul 3, 2014 at 9:38

Matyas

13.7k3 gold badges66 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

philipp · Accepted Answer · 2014-07-03 09:41:26Z

0

You can also write your transform as Transform matrix. The shortest version of concatenated Transform would be, if you multiply these matrices.

That way, you would have only one transform with one matrix in each definition.

answered Jul 3, 2014 at 9:41

philipp

16.6k15 gold badges66 silver badges121 bronze badges

Collectives™ on Stack Overflow

Merging CSS transforms

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related