CSS (4): Background + deformation, css background Deformation

CSS (4): Background + deformation, css background Deformation

• Background-origin

Set the original start position of the element background image. Make sure that the background is background-repeat and no-repeat.
This attribute takes effect.
Supported values include border-box, padding-box, and content-box.

Border-box: Set the origin of the background image to the top left corner of the border.

1 .img{2     background-image:url(1.jpg);3     background-repeat:no-repeat;4     background-origin:border-box;5 }6 7 <div class="img"></div>

Padding-box: Set the top left corner of the margin of the background image Origin

1 .img{2     background-image:url(1.jpg);3     background-repeat:no-repeat;4     background-origin:padding-box;5 }6 7 <div class="img"></div>

Content-box: Set the origin of the background image to the top left corner of the content area.

1 .img{2     background-image:url(1.jpg);3     background-repeat:no-repeat;4     background-origin:content-box;5 }6 7 <div class="img"></div>

• Background-clip

Specifies the area where the background image is cropped outward.
Supported values include border-box, padding-box, and content-box.

Border-box: Set the cropping area to within the border, including the border

1 .img{2     background-image:url(1.jpg);3     background-clip:border-box;4 }5 6 <div class="img"></div>

Padding-box: Set the cropping area to the inner margin, including the inner margin.

1 .img{2     background-image:url(1.jpg);3     background-clip:padding-box;4 }5 6 <div class="img"></div>

Content-box: sets the cropping area as the content area.

1 .img{2     background-image:url(1.jpg);3     background-clip:content-box;4 }5 6 <div class="img"></div>

• Transform

Change the element size, transparency, rotation angle, curvature, and so on.
Syntax:
Transform: none | <transform-function> +
Transform-function includes the following methods:
Translate (): Specify the 2D translation (2D translation) of the object ). The first parameter corresponds to the X axis, and the second parameter corresponds to the Y axis. If the second parameter is not provided, the default value is 0.
Transform-origin: Each element has a central point. By default, its central point is located at 50% of the X and Y axes of the element.
TranslateX (): Specifies the translation of the object's X axis (horizontal direction)
TranslateY (): Specifies the translation of the object's Y axis (vertical direction ).
Rotate (): Specifies the 2D rotation (2D rotation) of an object. You must first define the <'transform-origin'> attribute.
Scale (): Specify the 2D scale of the object (2D scale ). The first parameter corresponds to the X axis, and the second parameter corresponds to the Y axis. If the second parameter is not provided, the value of the first parameter is used by default.
Skew (): Specifies the object skew transformation (diagonal distortion ). The first parameter corresponds to the X axis, and the second parameter corresponds to the Y axis. If the second parameter is not provided, the default value is 0.
Translate3d (): Specifies the 3D displacement of an object. 1st parameters correspond to the X axis, 2nd parameters correspond to the Y axis, and 3rd parameters correspond to the Z axis, which cannot be omitted

Translate: offset 50% of the element to the X and Y axes respectively.

1 .img{2     width:200px;3     height:200px;4     background-image:url(1.jpg);5     transform: translate(50%,50%);6 }7 8 <div class="img"></div>

Transform-origin: sets the center point of an element to 0, that is, the upper left corner.

1 .img{2     width:200px;3     height:200px;4     background-image:url(1.jpg);5     transform-origin:0 0;6     transform: translate(50%,50%);7 }8 9 <div class="img"></div>

TranslateX: only sets the offset of the X axis.

1 .img{2     width:200px;3     height:200px;4     background-image:url(1.jpg);5     transform: translateX(50%);6 }7 8 <div class="img"></div>

TranslateY: only sets the offset of the Y axis.

1 .img{2     width:200px;3     height:200px;4     background-image:url(1.jpg);5     transform: translateY(50%);6 }7 8 <div class="img"></div>

Rotate: sets the element to be rotated in 2D. The acceptable parameter is angle (deg)

1 .img{2     width:200px;3     height:200px;4     background-image:url(1.jpg);5     transform: rotate(180deg);6 }7 8 <div class="img"></div>

Scale: Set the element to zoom 3 times. The accepted parameter is a numerical value, indicating the magnification.

1 .img{2     width:200px;3     height:200px;4     background-image:url(1.jpg);5     transform: scale(3);6 }7 8 <div class="img"></div>

Skew: sets the element skew angle.

1 .img{2     width:200px;3     height:200px;4     background-image:url(1.jpg);5     transform: skew(60deg);6 }7 8 <div class="img"></div>

Translate3d: sets the 3d displacement of elements.

1 .img{2     width:200px;3     height:200px;4     background-image:url(1.jpg);5     transform: translate3d(50px,50px,1px);6 }7 8 <div class="img"></div>