CSS3 transforms applied to background image

Time:2020-2-10

CSS transformations, while cool, have not yet been applied to background images. This article provides a good solution, when you really want to rotate the background image, or keep the background image unchanged when the container element rotates.

Use the CSS3 transform attribute to scale, tilt, and rotate any element. It is supported in all modern browsers without a vendor prefix. (I’ve added – WebKit – in case you want to support some older browsers.)


#myelement {
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}

Great stuff. However, this rotates the entire element – its content, border, and background image. What if you just want to rotate the background image? Or if you want the background to remain the same as the element rotates

At present, there is no W3C recommendation for background image conversion. This will be very useful, so I suspect that one will eventually appear, but it won’t help developers who want to use similar effects today.

Fortunately, there is a solution. Essentially, this is a hacking behavior that applies background images before or after pseudo elements, not the parent container. Pseudo elements can then be transformed independently.

Convert background only

Container elements can apply any style, but they must be set toposition:relative, because our pseudo element will be located in that element. You should also set overflow: hidden, unless you want the background to overflow the container.


#myelement {
position: relative;
overflow: hidden;
}

We can now create an absolutely positioned pseudo element with a transformation background. Z-index is set to – 1 to make sure it appears below the contents of the container.


#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);
}

Note that you may need to adjust the width, height, and position of pseudo elements. For example, if you are using a duplicate image, the rotating area must be larger than its container to completely cover the background:

Fix background on transform element

Fix the background of the converted element. All transformations on the parent container are applied to pseudo elements. Therefore, we need to undo the conversion, for example, if the container is rotated 30 degrees, we must rotate the background – 30 degrees to return 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 resize and position to ensure that the background adequately covers the parent container.

The effect works in all major browsers and can be restored to version 9 in edge and Internet Explorer. IE8 does not show any transformations, but it still shows the background.

summary

The above is the solution of CSS3 transforms applied to background image introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time!

Recommended Today

Oracle scheduled tasks

Timing task query To query Oracle scheduled tasks, you can use: –Scheduled tasks for all users SELECT * FROM dba_jobs; –Timing task of the user select * from user_jobs; In the query results, the what field generally stores the name of the stored procedure (or the specific stored procedure content). Broken = n indicates that […]