CODEWITHSUNDEEP
csstransformcss-transitions
blkedy
blkedy

Reputation: 1243

Merging CSS transforms

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

Upvotes: 0

Views: 145

Answers (2)

philipp
philipp

Reputation: 16485

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.

Upvotes: 0

Matyas
Matyas

Reputation: 13702

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

Upvotes: 2

Related Questions