CSS (4): Background + deformation, css background Deformation
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>
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>
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>