📜  如何使用 CSS 将多个变换属性应用于元素?

📅  最后修改于: 2021-08-30 02:32:08             🧑  作者: Mango

有多种程序可以在元素中应用多个变换属性。在本文中,我们将讨论最简单和流行的。在第一种方法中,我们将结合变换属性本身。在第二种方法中,我们将使用嵌套类来应用其他转换。

方法一:在这个方法中,我们将结合transform属性。可以为 transform 属性赋予多个值,这些值一个接一个地应用。它应用最右边的值,然后应用左边的值,这意味着将首先应用列表中最后一个值。这很重要,因为更改值的顺序会更改属性的整体结果。

  • 示例:在此示例中,我们将在加载的图像上应用变换属性,一个将旋转图像,另一个将移动图像。
    
    
      
    
        
    
      
    
        

            GeeksforGeeks     

                 How to apply multiple transforms in CSS?          

            The "box" class has both the rotate() and         translate() transformations applied.     

        
      
  • 输出:

方法 2:这里我们使用嵌套类来应用其他转换。此方法的工作原理是将具有特定变换的一个元素与具有另一变换的另一个元素嵌套在一起。这可以通过元素的多个嵌套来重复以应用多个变换。最顶层的元素,即嵌套元素的父元素,将首先应用,然后接下来将应用每个子元素的变换。

  • 示例:在此示例中,我们将在加载的图像上应用变换属性,一个将旋转图像,另一个将移动图像。
    
    
      
    
        
    
      
    
        

            GeeksforGeeks     

                 How to apply multiple transforms in CSS?              

            The inner element has the rotate() transformation and         
    the outer element has the translate() transformation          applied.     

        
            
        
      
  • 输出: