Conversion property transform

transform: rotate (45deg);
rotating
rotate (value)
is positive, clockwise rotation element indicates
a negative value indicates a counterclockwise rotation of element

transform: translate (200px, 100px) ;
displacement
translate (the horizontal direction of displacement, the vertical displacement)

transform: scale (3,2);
 zoom
write only one value: horizontal and vertical directions of the zoom level value of
two values: a first value represents the horizontal direction, the zoom magnification value, the second value represents the vertical direction the value of the zoom magnification
when the value range of 0 to 1, it indicates reduced, when the value is greater than 1, an enlarged, the value is not 0

Case:

(1)html

<div></div>

(2)css

div{
width: 100px;
height: 100px;
background: red;
transition: 1s;
}
div:hover{
transform: rotate(45deg);
}

 

Guess you like

Origin www.cnblogs.com/msw0803/p/11526212.html