Shulou(Shulou.com)06/01 Report--

This article will explain in detail how css3 uses the transform attribute to transform the background image. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

Using the css3 transform attribute, you can easily rotate, tilt, and scale any element. Currently, it works well on most browsers even without any prefixes.

# myelement {

-webkit-transform: rotate (30deg)

Transform: rotate (30deg)

}

This sounds great. However, this attribute rotates the entire element, including its content, border, and background image. What should you do if you just want to rotate the background image instead of the content? Or what if you just want to rotate the content instead of the background image?

We found a solution. This approach essentially applies the background map to pseudo-class elements such as before or after of an element rather than to the element itself. Then use the transform attribute independently of the pseudo-class element.

Just change the background

You can use any style for this element, but be sure to set the position attribute because its pseudo-class elements are located based on it. If you don't want the background to stay out of the element, set overflow: hidden.

# myelement {

Position: relative

Overflow: hidden

}

Now we can create an absolutely positioned pseudo-class element to transform the background. To ensure that it is lower than 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 during the transformation, you need to adjust the width,height,position attribute of the pseudo-class element. Example: if the pseudo-class element uses a repeatable image as the background, the rotation area must be larger than the parent element so that the entire parent element can be covered during rotation.

Realize a fixed background on the transformed elements

The transformation operations of all primary elements affect pseudo-class elements. If the pseudo-class element does not want the transformation operation, we need to undo the transformation, for example: when a parent element rotates 30 degrees, the pseudo-class element needs to rotate 30 degrees in the opposite direction to bring the pseudo-class element back to a 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, height and positioning attributes of the pseudo-class element to ensure that it completely covers the main element.

This is the end of this article on "how css3 uses transform attributes to transform the background image". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.