CSS rotate function: two-dimensional rotation of an element

rotate() CSS . HTML-. . , .

CSS rotate() , transform .

element {
  transform: rotate(45deg);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, . . CSS rotateX(), rotateY(), rotateZ() rotate3d().

. , .

, , CSS- <angle>. deg ( . degree - ).

, - .

. transform-origin.

, X, Y Z. rotate() CSS , .

element {
  transform: rotate(45deg);
  transform-origin: 20px 100%;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, top, bottom, left, right. .

transform , , CSS .

, , CSS- transition, .

element {
  transition: transform 2s;
}

element:hover {
  transform: rotate(180deg);
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, 180 . , .

animation @keyframes.

element {
  animation-name: rotate;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes rotate {
  from { 
    transform: rotate(0deg); 
  }
  to {
    transform: rotate(360deg);
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

rotate, 0 360 . animation-iteration-count , animation-timing-function - . CSS animation rotate- .