How to rotate background with css

CSS Rotating Background

CSS (Cascading Style Sheets) is a widely used technology for controlling the appearance and layout of web pages. You can use CSS to control the background, including color, image, and positioning. However, CSS also has a cool feature, which is that you can rotate the background to add some unique appearance to the website.

The basic idea of ​​rotating the background is to use the transform attribute of CSS3. This attribute allows developers to transform elements by specifying their matrix transformation in two or three dimensions. Using the rotate() function we can rotate the object. We can also use the translate() function to set the x and y coordinates of the object.

Let’s look at some examples demonstrating how to use CSS to rotate the background.

Example 1: Rotate a solid color background using CSS

First, let’s take a look at how to rotate a solid color background using CSS. We can achieve this with the following CSS code:

div {
    height: 100vh;
    width: 100vw;
    background-color: #FF6633;
    position: relative;
    transform: rotate(30deg);
    transform-origin: center;
}

In this example, the div element has the same height and width as the viewport size. The background color is set to orange. The position is relative to the document flow. By using the transform attribute and the rotate() function, we can rotate the background 30 degrees to give it a tilted effect on the page. We also set the transform-origin property so that the rotation happens around the center point.

Example 2: Using CSS to rotate the image background

We can use the same technique to rotate the image background. Here is an example that demonstrates how to rotate a background image using CSS:

div {
    height: 100vh;
    width: 100vw;
    background-image: url("background.jpg");
    background-size: cover;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background-image: inherit;
    transform: rotate(30deg);
    z-index: -1;
}

In this example, we use a div element with a background image. We set the property background-size:cover to adapt the background image so that it rotates without any truncation. We also hide the background image by using the overflow: hidden attribute.

Next, we use the :before pseudo-element to create a background image of the same size, then rotate it 30 degrees and use the z-index attribute to make it below the background. By setting the top: -50% and left: -50% properties, its position is relative to the center point of the parent div element.

Example 3: Using CSS to rotate text background

We can also use CSS to rotate text as the background. Here is an example that demonstrates how to rotate a text background using CSS:

div {
    height: 100vh;
    width: 100vw;
    font-size: 80px;
    position: relative;
    overflow: hidden;
}

div:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    height: 200%;
    width: 200%;
    background: #FF6633;
    transform: rotate(30deg);
    z-index: -1;
}

h1 {
    color: #FFFFFF;
    transform: rotate(-30deg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

In this example, we use a div element with text and place it in a :before pseudo-element with the same position and size superior. We rotate the :before pseudo-element by 30 degrees using the transform:rotate(30deg) attribute and set its color to orange.

Next, we use the transform: rotate(-30deg) attribute to rotate the text 30 degrees, and align it with the parent by setting position: absolute and top: 50% and left: 50% The center of the div element. Finally use the translate(-50%, -50%) attribute to center it.

Summary

CSS rotating background is a cool effect that can be used to make a website look more interesting and attractive. In this article, we used examples of solid color backgrounds, image backgrounds, and text backgrounds to demonstrate how to rotate a background using CSS. The transform:rotate() property we used in the demo is very convenient for rotating the background by specifying the degree.

The above is the detailed content of How to rotate background with css. For more information, please follow other related articles on the PHP Chinese website!