What to do if css3 rotation appears jagged?

Solution to jaggedness in css3 rotation: 1. Add "translateZ(0)" after the CSS3 transform attribute; 2. Use the "overflow:hidden;" of the outer container of the element to add the element "margin:- 1px;”; 3. When no border is needed, set the border attribute color of the element to transparent or the same as the background color.

The operating environment of this tutorial: Windows 10 system, css3 version, DELL G3 computer

What should I do if the css3 rotation appears jagged?

Solution to the jagged effect when using CSS3 transform rotate

Today, a friend encountered some problems while learning CSS3. After transform rotate, the problem appeared. A "border" of the same color as the background. When I first saw it, I was very curious. I hadn't studied it as carefully as he did, and I had never encountered this problem.

This article only discusses the problem of aliasing.

Solution:

1. Add translateZ(0) after the CSS3 transform attribute

2. On mobile phones, use the overflow:hidden; of the outer container of the element to add the element margin:-1px;

3. When no border is required, set the border attribute color of the element to transparent or the same as the background color

---

Details:

The code is as follows:

nbsp;html>



    <title>分享图标</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            margin: 5% auto;
            border: 1px solid #cccccc;
            width: 300px;
            height: 300px;
        }

        .bor {
            position: relative;
            top: 2%;
            left: 40%;
            width: 40%;
            height: 40%;
            border: 25px solid white;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            background-color: black;
        }
    </style>



    <div>
        <div>
        </div>
    </div>

I found that the color of the "border" is the same as the background color, the values ​​of the elements are normal as follows, and the element itself has been bordered, so I think it may be rendered by itself The problem.

After consulting the information, there are three methods:

1. Add translateZ(0)

# after the CSS3 transform attribute

##This is the most convenient solution in this case.

Using CSS3 3D transforms and rendering through the GPU can effectively achieve anti-aliasing effects. GPU acceleration was only added in IE9, so there are some issues with compatibility.

2. Use the overflow:hidden; of the outer container of the element and add the element margin:-1px;

Modify the code and try it:

.container {
            position: relative;
            left: 100px;
            top: 300px;
            overflow: hidden;
        }

        .bor {
            margin: -1px;
            width: 200px;
            height: 200px;
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
            border: 25px solid white;
            background-color: black;
        }

does not work in this case.

This solution works on mobile phones, but will cause problems on computers.

3. Set the border attribute color of the element to transparent or the same as the background color

Modify the code and try it:

Conflicts with the border requirement in this example.

It can be solved if border is not required.

Recommended learning: "

css video tutorial"

The above is the detailed content of What to do if css3 rotation appears jagged?. For more information, please follow other related articles on the PHP Chinese website!