Question

我试图在H3元素上合并一些不同的CSS变换。初始变换是旋转文本-45deg，而第二组是滑动和淡化元素。

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

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

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

合并CSS转换

2 个答案: