How do I use the CSS3 transform property to transform a background map?

This article and we share the main is to use the CSS3 transform attribute to transform the background map related content, come together to see it, hope to learn CSS3 help you.

Use the CSS3 transform property to easily rotate, tilt, and scale any element. Currently, even without any prefix, it can be used very well in most browsers. If you want to use this property in a BlackBerry browser or a UC browser, you need to add -webkit- prefixes.

#myelement {

-webkit-transform: Rotate (30deg);

transform: Rotate (30deg);

}

This sounds like a great one. However, this property rotates the entire element, including his content, border, and background map. What do you do if you just want to rotate the background of the image without rotating the content? Or if you just want to rotate the content without rotating the background, how do you do that?

There is no proposal for how to rotate the background map. I think this is a very common use scenario, and I'm sure it will eventually come up with a proposal, but it doesn't make any sense to the developers who want to do that right now.

Fortunately, we found a way to solve this problem. This approach essentially applies the background map to the before of an element or to the pseudo-class element after it, rather than to the element itself. Then the pseudo-class element is used independently of the transform property.

Just changing the background

This element can use any style, but be sure to set the position property because its pseudo-class elements are positioned based on it. If you don't want the background to be outside the element, set the Overflow:hidden .

#myelement {

position: relative;

overflow: hidden;

}

Now we can create an absolutely positioned pseudo-class element to implement the transform background. To make sure that he will be below the element content display, you need to set Z-index:-1 .

#myelement: Before {

content: "";

position: absolute;

width: 200%;

height: 200%;

top:-50%;

left:-50%;

z-index:-1;

background: url (background.png) 0 0 repeat;

-webkit-transform: Rotate (30deg);

transform: Rotate (30deg);

}

It is important to note that in the process of transformation, you need to adjust the width height position property of the Pseudo-class element. Example: If a pseudo-class element uses a repeatable picture to make a background, the rotated area must be larger than the parent element, so that the entire parent element can be overwritten during the rotation.

To implement a fixed background on a transformed element

The transformation operations of all the main elements affect the pseudo-class elements. If the pseudo-class element does not want to transform the operation, we need to undo the transformation, example: when a parent element rotates 30 degrees, the pseudo-class element needs to rotate 30 degrees in the opposite direction, so that the pseudo-class elements fall back to the fixed position.

#myelement {

position: relative;

overflow: hidden;

-webkit-transform: Rotate (30deg);

transform: Rotate (30deg);

}

#myelement: Before {

content: "";

position: absolute;

width: 200%;

height: 200%;

top:-50%;

left:-50%;

z-index:-1;

background: url (background.png) 0 0 repeat;

-webkit-transform: Rotate ( -30deg);

transform: Rotate ( -30deg);

}

Again, you need to adjust the width and positioning properties of the pseudo-class element to ensure that it can completely overwrite the main element.

Most mainstream browsers can achieve this effect, including Edge, minimum support to IE9. IE8 will only show the background but will not have any transformations.

Source: Zhong Cheng Translation

How do I use the CSS3 transform property to transform a background map?