问

如何将多个变换声明应用于一个元素？

hupi12丨发布于 2023-02-06 18:59

我有一个带有两个类的元素,一个称为"旋转",将元素旋转360度,另一个称为"双面",将元素缩放为正常大小的2倍:

.rotate {
    transform: rotate(0deg);
}

.rotate:hover {
    transform: rotate(360deg);
}

.doublesize {
    transform: scale(1);
}

.doublesize:hover {
    transform: scale(2);
}



http://jsfiddle.net/Sbw8W/

我猜这不起作用,因为类重写了彼此的transform属性？

我知道我可以轻松地在一个CSS规则中执行此操作,例如:

.doublerotatesize {
    transform: scale(1) rotate(0deg);
}

.doublerotatesize:hover {
    transform: scale(2) rotate(360deg);
}


但是如果可能的话,我希望能够将每个类别与另一个类别分开.



        
        1 个回答
        
                        
                
  我猜这不起作用,因为类重写了彼此的transform属性？


正确.作为级联如何工作的副作用,这是一个不幸的限制.

您必须在单个transform声明中指定这两个函数.您可以简单地将两个类选择器链接在一起,而不是为组合转换创建新类:

.doublesize.rotate {
    -webkit-transform: scale(1) rotate(0deg);
}

.doublesize.rotate:hover {
    -webkit-transform: scale(2) rotate(360deg);
}


...但正如您所看到的,问题在于transform属性而不是选择器.



预计这将在变换级别2中得到纠正,其中每个变换都被提升为其自己的属性,这将允许您简单地通过单独声明它们来组合变换,就像任何其他CSS属性组合一样.这意味着您可以简单地执行此操作:

/* Note that rotate: 0deg and scale: 1 are omitted
   as they're the initial values */

.rotate:hover {
    rotate: 360deg;
}

.doublesize:hover {
    scale: 2;
}


......并利用级联而不是受其阻碍.无需专门的类名或组合的CSS规则.

        

                
                    2023-02-06 19:02  回答
                       Dr_H-鄧
                
            

                    

    

    
    
        撰写答案
        
            
                
                    回答问题...



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签