CSS3 2D conversion of rotation

CSS3 2D conversion of rotation

CSS3 2D conversion

• Conversion (transfrom) is one of the features CSS3 subversive, displacement elements can be achieved, rotation, scaling and other effects
• Conversion (transfrom) can be simply understood as modified
  • Mobile: transfrom
  • Rotation: rotate
  • Scale: scale

CSS3 2D conversion of rotary rotate

• 2D rotation is that we let the elements rotate clockwise or counterclockwise in a two-dimensional plane

• grammar

• transform:rotate(度数)

• Emphasis
  • Root degrees rotate inside, the unit is deg (for example: rotate(45deg))
  • When the angle is positive, clockwise rotation, the angle is negative, counterclockwise rotation
  • The default rotation center point is the center point of the element

• Let's make a picture rotation

img {
        width: 150px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin: -75px;
        transition: all 1.5s;
}

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

• We use the transition and rotation complete a picture clockwise rotation of 360 °

2D conversion center point

• transform-originIt can be used to set the center point of the conversion element
• grammar
  • transform-origin: x y;
• Emphasis
  • Note that the back of the x and y parameters separated by a space
  • xy default conversion element central point is the central point (50% to 50%)
  • You may also be provided for the pixel xy or Nouns (top botton left center)
    • transform-origin: 50% 50%;Equivalent totransform-origin: center center;
    • transform-origin: 40px 40px;Px pixels can be
    • transform-origin: left bottom;
• Let us show youtransform-origin: 40px 40px;

img {
           width: 150px;
           position: fixed;
           top: 50%;
           left: 50%;
           margin: -75px;
           transition: all 1.5s;
           transform-origin: 40px 40px;
       }

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