合并CSS转换

Question

我试图在H3元素上合并几个不同的CSS转换。第一个变换是旋转文本-45度，而第二个变换是滑动和褪色元素。

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

Answer 1

如果您希望应用多个转换，只需像下面的CSS一样将它们连接起来:

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

Answer 2

你也可以把你的变换写成transform matrix。如果您将这些矩阵相乘，则连接变换的最短版本将是

这样，在每个定义中您将只有一个矩阵的一个变换。