当前位置：网站首页>Plane conversion (displacement, rotation, scaling)

Plane conversion (displacement, rotation, scaling)

2022-07-27 04:52:00 【Front end development boy】

Plane transformation concept （ The goal is ： Use transform Attribute implements the of the element Displacement 、 rotate 、 The zoom Equal effect ）

1、 Displacement （ The goal is ： Use translate Achieve element displacement effect ）

grammar ：transform：translate（ Horizontal movement distance , Vertical movement distance ）;

Value （ Both positive and negative ）： Pixel unit value ; percentage （ The reference is the size of the box itself ） Be careful ：（x Right axis ,Y The shaft is straight down ）

skill ： translate（） If only one value is given , Express X Moving distance in axis direction ;

Set the moving distance in a certain direction separately ：translateX() & translY()

2.1 Plane conversion rotation （ The goal is ： Use rotate Achieve element rotation effect ）

grammar ：transform:rotate( angle ); Be careful ： The unit of angle is deg

skill ： The value can be positive or negative （ just - Clockwise rotation ; negative - Counter clockwise rotation ）

<style>

img {

width: 250px;

margin: 100px;

transition: all 0.5s;

}

img:hover {

transform: rotate(360deg);

}

</style>

<body>

<img src="./images/rotate.png" alt=""> // Insert a picture

</body>

2.2 Change the origin （ The goal is ： Use transform-origin Attribute change conversion origin ） This attribute is added to your element

grammar ： The default dot is the center point of the box ; transform-origin： Origin horizontal position The vertical position of the origin ;

Value ： Position NOUN （left、top、right、bottom、center）

Pixel unit value

percentage （ Calculate the size of the box itself ）

2.3 Multiple conversion （ The goal is ： Use transform Compound attribute Realize multi-modal transformation ）

skill ：transform：translate（） rotate（）;

The zoom （ The goal is ： Use scale Change the size of an element ）

grammar ：transform：scale（x Axis scaling factor ,y Axis scaling factor ）;

skill ： In general , Just for scale Set a value , Express x Axis and y Axis scaling

transform：scale（ Zoom multiple ）;

z-index Property to set the stacking order of elements . Elements with a higher stacking order are always in front of elements with a lower stacking order .

4、 The gradient （ The goal is ： Use background-image Change the background color gradient ）

grammar ：background-image: linear-gradient(

transparent,// Start gradient （ colourless ）

rgba(0,0,0,0.6) // End gradient （ Use rgba Better ）