css-transform2D transformation

---

CSS transformProperties allow you to rotate, scale, skew or translate a given element.
Commonly used transformattributes are the following

Attributes	illustrate
translate(0, 0)	displacement
rotate(0deg)	to rotate
scale(1)	zoom
skew(0deg)	miter cut

Transform documentation : https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

Let's talk about these methods separately

translate() displacement

translatex、yThe offset is achieved through the parameters of the axis
Syntax: transform: translate(10px, 10px); , xaxis offset 10px, yaxis offset 10px.
It is also possible to set the offset for a certain axis separately, and the syntax of the axis cssis provided :x、y
transform: translateX(10px);
transform: translateY(10px);

translateThe parameter can use percentage, if the parameter is a percentage, the actual offset distance is based on its own size, for example: a 100pxsquare, translateX(50%), then the actual x-axis offset is its own 100px * 50% = 50px, with this feature, transform: translate(-50%, -50%);Vertical positioning and centering can be realized by writing.

.box{
    
    
	width: 20px;
	height: 20px;
	background: #e94242;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%); 
}

transform: translateThe first parameter offsets its own xaxis 50%, the second parameter offsets its own yaxis 50%, and if leftit is offset 50%by itself 100px,
then: left + 自身 - x轴自身50% = 50% + 100px - 50px = 偏移量正好居中, the same is true for the y axis.

In addition, translateit is not affected by the document flow, direction: ltr;the document flow is left, and translateXit is still offset to the right.

---

rotate() rotate

rotate()It is used to set the rotation angle of the element, rotate(45deg)which is clockwise rotation 45°, rotate()and the rotation is affected by the anchor point ( transform-origin). The problem of the anchor point is described below.
rotate()There are four units, namely: degangle, gradgrad, radradian, and returncircle. The most commonly used is degthe angle, and other daily items are basically not used.

.box{
    
    
     width: 20px;
     height: 20px;
     background: #e94242;
     transform: rotate(45deg); 
    }

---

scale() zoom

scale()There are two parameters, syntax: transform: scale(参数一 , 参数二), which correspond to horizontal and vertical enlargement and reduction respectively, and the default value is 1(no enlargement).

transform: scale(2); /**等比放大2倍 */
transform: scaleX(2); /**水平放大2倍 */
transform: scaleY(2); /**垂直放大2倍 */
transform: scale(2,1); /**x轴放大2倍，y轴不变 */
transform: scale(2,0.5); /**x轴放大2倍，y轴缩小一半 */

.shiftBox{
    
    
     width: 80px;
     height: 80px;
     transform: scale(2,0.5); /**x轴放大2倍，y轴缩小一半 */
}

---

skew() oblique cutting

The literal meaning of beveling is to tilt the object. Syntax: transform: skew(10deg, 5deg)indicates the horizontal bevel and 10vertical bevel 5. It accepts two parameters, the first parameter indicates xthe axis, and the second parameter yis the axis.
It is also possible to bevel a certain axis independently, and the syntax of the axis cssis provided : :horizontal bevel degree :vertical bevel degreex、y
transform: skewX(10deg)10
transform: skewY(10deg)10

/* skew() 斜切 */
.shiftBox{
    
    
    width: 80px;
    height: 80px;
    background: #80c342;
    transform: skew(10deg, 5deg); /**水平斜切10度 垂直斜切5度 */
}

x、yOblique cutting can be applied to the transformation of graphics, and some picture effects can be achieved only by adjusting the inclination angle of the axis. In some cases, clip-pathit is more convenient than the cutting attribute ( ).
For example: To realize the progress display of the current task,

this effect only needs to draw a rectangle, draw another rectangle xwith the axis 45tilt , and the axis tilt can be realized

x-45°

---

Transform details and properties

Element references to transform attribute values ​​do not affect the size and position of the element

In our daily layout, the use marginor positioning usually affects other elements.

For example, in the above case, the second button is set margin-left, which causes the position of the third button to change.
If the second button uses transform: translateX()an offset, the position of the third button will not be affected, because transformthe attribute value will not affect the original position .

Also, inline elements are not transformaffected by all transformation properties and must be converted to Only for inline blocks.

span{
    
    
    /* 内联元素不受transform所有的变换特性 */
    display: inline-block; /* 设置行内块后，受transform影响，解决 */
    transform: translateX(50px); 
}

---

The order of the parameters is different and will affect the result

transformThe parameters will be executed in sequence, and the same parameters with different positions will affect the execution results.

.order{
    
    
    width: 200px;
    height: 200px;
    border: 1px solid red;
    :nth-child(1){
    
    
        width: 20px;
        height: 20px;
        background: #4d90fe;
        transform: translateX(50px) scale(2); /* 先位移再放大，顺序影响结果 */
    }
    :nth-child(2){
    
    
        width: 20px;
        height: 20px;
        background: #80c342;
        transform: scale(2) translateX(50px); /* 先放大再位移，顺序影响结果 */
    }
}

Here bthe box is enlarged first, and then executed translateX, and the offset is performed according to the enlarged ratio, so bthe offset is afarther than that.

There are two points to note:
1. When using transformand at the same time, crop first and then transform 2. And , should be the preferred choice , and the performance is higher, because the attribute value will not affect the original position.clip-path
transformmargintransformtransform

---

transform will create a new stacking context

When multiple elements are stacked together, usually the element executed later will overwrite the element executed earlier, similar to the following:

one layer after another, if you want to highlight the elements, you can set it to change the level, in fact , it can also be z-indexused here , and a new one will be created In the cascading context, the element executed later will overwrite the element executed earlier, so it is not necessary to achieve the effect of highlighting the hierarchical level. Here, the original size remains unchanged, which is equivalent to no operation on the element, but the cascading order is changed, as follows :transformtransformz-indextransform: scale(1);

.layer{
    
    
    width: 200px;
    height: 50px;
    border: 1px solid red;
    padding-left: 20px;
    margin: 50px;
    >img{
    
    
        width: 50px;
        margin-left: -20px;
    }
    >img:hover{
    
    
        transform: scale(1); /*原大小*/
        box-shadow: 0px 0px 5px  black;
    }
}

---

Fixed Positioning Effectiveness

Fixed positioning : The element will be moved out of the normal document flow, and no space is reserved for the element, but the position of fixedthe element is specified by specifying the position of the element relative to the screen viewport ( ) . viewportThe position of the element does not change when the screen is scrolled.
But if fixedthe parent of 's is set transform, then the fixed positioning will take effect.

/* 固定定位实效 */
.positions{
    
    
    width: 200px;
    height: 50px;
    border: 1px solid red;
    margin-top: 10px;
    .positionBox{
    
    
        width: 50px;
        height: 50px;
        background: #80c342;
        transform: translateX(10px);
        .positionInner{
    
    
            width: 20px;
            height: 20px;
            background: #e94242;
            right: 0px;
            position: fixed; /* 父级设置了transform导致fixed失效 */
     
        }
    }
}

---

Change the limit of overflow to elements

Parent element settings overflow: hidden;cannot affect child elements with absolute positioning, and child content cannot be hidden beyond the scope of the parent.

.overFlow{
    
    
    width: 100px;
    height: 100px;
    background: #4d90fe;
    overflow: hidden;
    >img{
    
    
        width: 200px;
        height: 50px;
        position: absolute; /* 绝对定位不受overflow:hidden影响 */
        border: 1px solid red;
    }
}

But if the parent is set transform, overflowthe restrictions will be changed, and absolutely positioned child elements will also be affected

.overFlow2{
    
    
    width: 100px;
    height: 100px;
    background: #80c342;
    overflow: hidden;
    transform: scale(1); /* transform更改overflow的限制，绝对定位的子元素也受到到影响 */
    >img{
    
    
        width: 200px;
        height: 50px;
        position: absolute;  
        bottom: 0;
        border: 1px solid red;
    }
}

There is another point to note here. imgThe picture runs to the bottom because the parent element is set . As long as the attribute value is not set transform, the element can also be used as the containing block of the absolute positioning element, which is equivalent to enabling relative positioning.transformnone

---

transform-origin changes the center coordinates of the element transformation

transform-origin CSSProperties let you change the origin of an element's deformation. In fact, it is the anchor point coordinates of the element, and the default anchor point is in the center of the element.

.innerBox2{
    
    
        width: 20px;
        height: 20px;
        background: #e94242;
        transform: rotate(20deg);  /*顺时针旋转20°*/
}

The anchor point is in the center, rotate clockwise 20°, if you change the position of the anchor point to the upper right corner, the following effect will appear

.innerBox2{
    
    
        width: 20px;
        height: 20px;
        background: #e94242;
        transform: rotate(20deg); 
        transform-origin: right top; /**受锚点影响 */
}

Anchors can use direction keywords or parameters.

For an introduction to anchor points, please see the documentation: https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-origin

The pendulum effect is achieved through the anchor point

<div class="originPointer"></div>

.originPointer{
    
    
    width: 10px;
    height: 100px;
    margin: 50px;
    &::before{
    
    
        content: '';
        width: 10px;
        height: 10px;
        position: absolute;
        background: #80c342;
        border-radius: 50%;
        transform: translateY(-50%);
    }
    &::after{
    
    
        content: '';
        width: 10px;
        height: 100px;
        background: #4d90fe;
        position: absolute;
        clip-path: polygon(50% 0%, 50% 0%, 100% 100%, 0% 100%);
        transform: rotate(0deg);
        /* transform-origin: top left; */  /* 改变锚点为左上角 */
        transform-origin: 0px 0px;  /* 锚点左上角 x轴和y轴，默认起点在最左侧 */
        animation: pointer 2s infinite linear; /* 添加linear使画面流程不卡顿 */
    }
    @keyframes pointer {
    
    
        0% {
    
    
            transform: rotate(0deg);  
        }
        25% {
    
    
            transform: rotate(20deg);
        }
        50% {
    
    
            transform: rotate(0deg);
        }
        75% {
    
    
            transform: rotate(-20deg);
        }
        100% {
    
    
            transform: rotate(0deg);
        }
    }
}

---

Case source code: https://gitee.com/wang_fan_w/css-diary

If you think this article is helpful to you, please like, bookmark and forward~